Question

In: Computer Science

Summary Figure 3–79 shows an example page containing two applications of floating objects. In the first...

Summary

Figure 3–79 shows an example page containing two applications of floating objects. In the first line of Lincoln’s second inaugural speech a drop capital is created by floating the first letter of the first paragraph next to the surrounding text. The text of the speech is wrapped around the image of Lincoln using an irregular line wrap. This effect is created by cutting the Lincoln image into separate strips which are floated and stacked on top of each other. In this Coding Challenge you will explore how to create both effects.

Figure 3-79

Do the following:

1. Open the files code3-1.html and code3-1_float.css and in the comment section enter your name (First + Last) and the date (MM/DD/YYYY) into the Author: and Date: fields of the file.

2. Go to the code3-1.html file in your editor. Within the head section insert a link element linking the page to the code3-1_float.css style sheet file. Take some time to study the content of the page.

3.lOpen the file code3-1_float.css, and for all img elements create a style rule to set the height of the image to 3.3em. Float all img elements on the right margin, but only when the right margin is first cleared of any floats. (Hint: clear: right).

4. To create a drop cap insert a style rule for the selector p:first-of-type::first-letter and add the following styles:

  1. Float the element on the left margin.
  2. Set the font size to 4em and the line height to 0.8em.
  3. Set the size of the right margin and padding space to 0.1em. Set the bottom padding to 0.2em.

5. Display the first line of the speech in small caps by adding a style rule for the selector p:first-of-type::first-line that changes the font variant to small-caps and the font size to 1.4em.

6. Open the page in the browser preview and verify the layout of the page resembles that shown in Figure 3-79.

Code 3-1.HTML to be edited:

<!doctype html>

<html lang="en">

<head>

   <!--

   New Perspectives on HTML5 and CSS3, 8th Edition

   Tutorial 3

   Coding Challenge 1

   

   Author:

   Date:

   Filename: code3-1.html

   -->

   <meta charset="utf-8">

   <title>Coding Challenge 3-1</title>

   <link href="code3-1.css" rel="stylesheet" />

</head>

<body>

   <h1>Lincoln's Second Inaugural</h1>

   <p>The Almighty has his own purposes. "Woe unto the world because of offenses! For

      <img src="lincoln01.png" alt="" />

      <img src="lincoln02.png" alt="" />

      <img src="lincoln03.png" alt="" />

      <img src="lincoln04.png" alt="" />

      <img src="lincoln05.png" alt="" />

      <img src="lincoln06.png" alt="" />

      <img src="lincoln07.png" alt="" />

      <img src="lincoln08.png" alt="" />

      <img src="lincoln09.png" alt="" />

      <img src="lincoln10.png" alt="" />

      it must needs be that offenses come; but woe to that man by whom the offense

      cometh." If we shall suppose that American slavery is one of those offenses which,

      in the providence of God, must needs come, but which, having continued through his

      appointed time, he now wills to remove, and that he gives to both North and South

      this terrible war, as the woe due to those by whom the offense came, shall we discern

      therein any departure from those divine attributes which the believers in a living

      God always ascribe to him?

   </p>

   <p>Fondly do we hope &mdash; fervently do we pray &mdash; that this

      mighty scourge of war may speedily pass away. Yet, if God wills that it continue

      until all the wealth piled by the bondsman's two hundred and fifty years of unrequited

      toil shall be sunk, and until every drop of blood drawn by the lash shall be paid by

      another drawn with the sword, as was said three thousand years ago, so still it must

      be said, "The judgments of the Lord are true and righteous altogether."

   </p>

   <p>With malice toward none; with charity for all; with firmness in the right, as God

      gives us to see the right, let us strive on to finish the work we are in; to bind up

      the nation's wounds; to care for him who shall have borne the battle, and for his

      widow, and his orphan &mdash; to do all which may achieve and cherish a just and lasting peace

      among ourselves, and with all nations.

   </p>

</body>

</html>

Code 3-1.css to be edited:

@charset "utf-8";

/*

   New Perspectives on HTML5 and CSS3, 8th Edition

   Tutorial 3

   Coding Challenge 1

   Author:

   Date:   

   

   Filename: code3-1.css

*/

body {

   width: 900px;

   margin: 20px auto;

   font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";

   font-size: 1.25em;

   padding-bottom: 30px;

}

h1 {

   font-size: 2.2em;

   text-align: center;

}

Code 3-1_float.css to be edited:

@charset "utf-8";

/*

   New Perspectives on HTML5 and CSS3, 8th Edition

   Tutorial 3

   Coding Challenge 1

   Author:

   Date:   

   

   Filename: code3-1_float.css

*/


Images being used:

  • lincoln01.png
  • lincoln02.png
  • lincoln03.png
  • lincoln04.png
  • lincoln05.png
  • lincoln06.png
  • lincoln07.png
  • lincoln08.png
  • lincoln09.png
  • lincoln10.png

Solutions

Expert Solution

Okay So we will approach this problem step by step.

Before we begin, there are some things which i'd like to let you know

- Everything that i insert in your code file would be in Bold so that you can differentiate easily between the given question and the answer.

- Now in HTML, we write our comment as <!-- your text --> . So according to the problem, you have to write your name and date in the comment section of the HTML and CSS files.

- link tag is used to link html and css files. All the other tags used in the changes depicts the same such as line-height is for line height and font-size is for font size. px stands for pixels and it is not screen relative while em is screen relative.

now, here's my solution

Code 3-1.html :

<!doctype html>

<html lang="en">

<head>

   <!--

   New Perspectives on HTML5 and CSS3, 8th Edition

   Tutorial 3

   Coding Challenge 1

   

   Author:

   Date:

   Filename: code3-1.html

   -->

   <meta charset="utf-8">

   <title>Coding Challenge 3-1</title>

   <link href="code3-1.css" rel="stylesheet" />

<link href="code3-1_float.css" rel="stylesheet" />

</head>

<body>

   <h1>Lincoln's Second Inaugural</h1>

   <p>The Almighty has his own purposes. "Woe unto the world because of offenses! For

      <img src="lincoln01.png" />

      <img src="lincoln02.png" />

      <img src="lincoln03.png" />

      <img src="lincoln04.png" />

      <img src="lincoln05.png" />

      <img src="lincoln06.png" />

      <img src="lincoln07.png" />

      <img src="lincoln08.png" />

      <img src="lincoln09.png" />

      <img src="lincoln10.png" />

      it must needs be that offenses come; but woe to that man by whom the offense

      cometh." If we shall suppose that American slavery is one of those offenses which,

      in the providence of God, must needs come, but which, having continued through his

      appointed time, he now wills to remove, and that he gives to both North and South

      this terrible war, as the woe due to those by whom the offense came, shall we discern

      therein any departure from those divine attributes which the believers in a living

      God always ascribe to him?

   </p>

   <p>Fondly do we hope &mdash; fervently do we pray &mdash; that this

      mighty scourge of war may speedily pass away. Yet, if God wills that it continue

      until all the wealth piled by the bondsman's two hundred and fifty years of unrequited

      toil shall be sunk, and until every drop of blood drawn by the lash shall be paid by

      another drawn with the sword, as was said three thousand years ago, so still it must

      be said, "The judgments of the Lord are true and righteous altogether."

   </p>

   <p>With malice toward none; with charity for all; with firmness in the right, as God

      gives us to see the right, let us strive on to finish the work we are in; to bind up

      the nation's wounds; to care for him who shall have borne the battle, and for his

      widow, and his orphan &mdash; to do all which may achieve and cherish a just and lasting peace

      among ourselves, and with all nations.

   </p>

</body>

</html>

Code 3-1.css to be edited:

@charset "utf-8";

/*

   New Perspectives on HTML5 and CSS3, 8th Edition

   Tutorial 3

   Coding Challenge 1

   Author:

   Date:   

   

   Filename: code3-1.css

*/

body {

   width: 900px;

   margin: 20px auto;

   font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";

   font-size: 1.25em;

   padding-bottom: 30px;

}

h1 {

   font-size: 2.2em;

   text-align: center;

}

p:first-of-type::first-letter{

float:left;

font-size: 4 em;

line-height: 0.8em;

margin-right: 0.1em;

padding-right: 0.1em;

padding-bottom: 0.2 em;

}

p:first-of-type::first-line{

  font-variant: small-caps;

font-size: 1.4 em;

}

Code 3-1_float.css:

@charset "utf-8";

/*

   New Perspectives on HTML5 and CSS3, 8th Edition

   Tutorial 3

   Coding Challenge 1

   Author:

   Date:   

   

   Filename: code3-1_float.css

*/

img{

height :3.3em;

float : right;

}

h1,p{

clear:right;

}

These are all the changes which should be made in given files other than your name and date.

Please comment and let me know if you have any doubts.

Thank you.

Have a good day.

venereology answered 15 hours ago
Next > < Previous

Related Solutions

The figure shows a circuit containing an electromotive force, a capacitor with a capacitance of C...
The figure shows a circuit containing an electromotive force, a capacitor with a capacitance of C farads (F), and a resistor with a resistance of R ohms (Ω). The voltage drop across the capacitor is Q/C, where Q is the charge (in coulombs, C), so in this case Kirchhoff's Law gives RI + Q/C =E(t) But I = dQ/dt, so we have R(dQ/dt) + 1/C (Q) = E(t) Suppose the resistance is 10 Ω, the capacitance is 0.05 F, and...
Investigate clinical decision support applications and provide a summary of at least two of the applications...
Investigate clinical decision support applications and provide a summary of at least two of the applications that you find. Please provide facts about each of the applications and answer the following questions: 1.        What does the application do? 2.        How does the application help the user? Listed below are application examples. You are not limited to this selection: DxPlain®, QMR®, Prodigy®, Diagnosis Pro®, Iliad®, and Problem Knowledge Couplers® Please do not duplicate your fellow classmates’ responses. If you use the...
The figure shows a combination of two identical lenses
The figure shows a combination of two identical lenses. (Intro 1 figure) Part A Find the position of the final image of the 2.0-cm-tall object. x = ___ cm from the object.   Part B Find the size of the final image of the 2.0-cm-tall object. h =  ___ cm   Part C Find the orientation of the final image of the 2.0-cm-tall object. erect inverted  
The figure shows angular position versus time graphs for six different objects. a) Rank these graphs on the basis of...
The figure shows angular position versus time graphs for six different objects.a) Rank these graphs on the basis of the angular velocity of each object. Rank positive angular velocities as larger than negative angular velocities. Rank from largest to smallest. To rank items as equivalent, overlap them.b) Rank these graphs on the basis of the angular acceleration of the object. Rank positive angular accelerations as larger than negative angular accelerations.Rank from largest to smallest. To rank items as equivalent, overlap...
(Figure 1) shows an acceleration-versus-force graph for three objects pulled by rubber bands. The mass of...
(Figure 1) shows an acceleration-versus-force graph for three objects pulled by rubber bands. The mass of object 2 is 0.30 kg . The graph reads: object 1 a=5 and force of 2 rubber bands. Object 2 a= 5 and force of 5 rubber bands. Object 3 a=2.5 with force of 6 rubber bands. What is the mass of objects 1 and 3?
Mark up a web page containing the poem "Revelation" by Robert Frost shown in Figure 1–47....
Mark up a web page containing the poem "Revelation" by Robert Frost shown in Figure 1–47. Figure 1-47 Do the following: Tasks Open the file code1-2.html and in the comment section enter your name (First + Last) and the date (MM/DD/YYYY) into the Author: and Date: fields of the file. 0 Mark the text Revelation as an h1 heading and the text by Robert Frost as an h2 heading. Mark each stanza of the poem as a paragraph. Within each...
Vernier scale. The figure below shows a scale found on instruments such as a micrometer caliper used for accurately measuring dimensions of objects.
Vernier scale. The figure below shows a scale found on instruments such as a micrometer caliper used for accurately measuring dimensions of objects. The lower scale slides along the upper scale and is used to interpolate between the markings on the upper scale. In (a) The reading (at the left-hand 0 of the lower scale) is between 1.4 and 1.5 on the upper scale. To find the exact reading, observe which mark on the lower scale is aligned with a...
Write a 3-5 page summary on the Role of the Controller on one or both of...
Write a 3-5 page summary on the Role of the Controller on one or both of Cash and Investments; and Property, Plant, and Equipment,
Write a first draft summary, about one page, summarizing the properties of each of the following...
Write a first draft summary, about one page, summarizing the properties of each of the following groups: Group 4A, Group 5A, Group 6A, and Group 7A.
1)  Two small, identical objects have charges of 6 μC and -3 μC. If the objects are...
1)  Two small, identical objects have charges of 6 μC and -3 μC. If the objects are 13 cm apart, what is the electric force the objects exert on each other? (in N) - 7.99x10^5 - 9.59 - 4.79 - 1.20 - 3.20x10^6 2) Now imagine that the two small, identical objects with charges of 6 μC (Object A) and -3 μC (Object B) are CONDUCTORS. If the objects are brought together so they touch, then separated, what is the amount...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT