Homework Sourse1 Open the HTML and JavaScript files in this folder exercise
1. Open the HTML and JavaScript files in this folder:
exercises_extra\\ch09\\pull_quotes
2. Review the HTML and notice the span elements that are included in two of the paragraphs. Also notice that the text of the first span element doesn’t start with a capital letter.
3. Add jQuery that gets the text of each span element so it can be used for the pull quotes. Then, add a blockquote element for each quote that contains a <q> element with the quote. The blockquote element should be added after the <p> element that contains the span element.
4. Notice that the first pull quote starts with a lowercase letter. Then, use string manipulation to make sure that the first letter of each quote is uppercase.
5. Code a statement that adds CSS properties to the blockquote element so the pull quotes look like the ones shown above.
html:
<!DOCTYPE HTML>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Pull Quotes</title>
<link rel=\"stylesheet\" href=\"main.css\">
<script src=\"http://html5shiv.googlecode.com/svn/trunk/html5.js\"></script>
<script src=\"http://code.jquery.com/jquery-latest.min.js\"></script>
<script src=\"pull_quotes.js\"></script>
</head>
<body>
<section>
<h1>Murach’s HTML5 and CSS3</h1>
<p id=\"author\">By Zak Ruvalcaba and Anne Boehm</p>
<article>
<p>HTML5 and CSS3 are changing how web pages are developed in some exciting new ways!
The trick is learning how to use this new functionality as quickly, as easily, and as
sensibly as possible.</p>
<p>That\'s where this book comes in. Whether you\'re new to web development...or whether
you\'re an experienced web developer who\'s been frustrated by the slow pace and gaping
holes in the other training you\'ve tried...this book was written for YOU.</p>
<h2>Get going fast</h2>
<p>In just the first 6 chapters of this book, you\'ll learn more about web development than
you can from most full books.</p>
<p>It\'s true! In fact, <span>by the end of the crash course in
Section 1, you\'ll be developing web pages the way today\'s best professionals do.</span>
That means you\'ll be using HTML5 semantic elements to mark up the structure of the
content on the page and CSS to format and lay out that content.</p>
<p>If you\'re new to the subject, you\'ll see why you need to use floating and the CSS box
model right from the start. If you\'ve used earlier editions of CSS, you\'ll be amazed at
how easily CSS3 lets you create pages with text and box shadows, rounded corners, gradients…
all without having to spend time on custom images for each effect!</p>
<h2>But that\'s just the beginning</h2>
<p>In Section 2, you\'ll see how to refine your web pages with the features that users
expect today. That includes:</p>
<ul>
<li>Providing attractive forms, with built-in data validation that doesn\'t require
the use of JavaScript the way it used to
<li>Ensuring that elements like links and images work in an intuitive way
<li>Adding audio and video clips to your pages
<li>Formatting your web content for easy printing
<li class=\"last\">And more!
</ul>
<h2>Where JavaScript and jQuery fit in</h2>
<p><span>Using JavaScript code, you can provide the special effects that are so engaging to web
site visitors.</span> At one time, you had to be a JavaScript expert to do the coding yourself.
But today, you can take advantage of the many ready-to-use JavaScript routines that are
available on the web...especially those in the popular jQuery libraries.</p>
<p>So Section 3 in this book gets you started. It shows you how to:
<ul>
<li>use tested JavaScript code to enhance your web pages with features like image
rollovers, image swaps, and slide shows
<li>use jQuery to enhance your web pages with features like accordions, carousels, and
popup boxes
<li>use jQuery Mobile to develop web pages for mobile devices with the look and feel of
native applications
<li class=\"last\">start using the HTML5 features that require the use of JavaScript, like embedded fonts,
geolocation, and canvas
</ul>
<p>You\'re still going to want to know some JavaScript so that you can tweak the code to suit
your needs. When you\'re ready to learn that, please see our JavaScript book.</p>
<h2>Design and deployment</h2>
<p>Finally, Section 4 rounds out your skills with chapters on web design and deployment.</p>
<p>Once you have a good grasp of how to develop web pages, you can understand the kinds of
decisions you have to make in designing a site, and chapter 17 shows you how to do that using
today\'s best practices. Then, chapter 18 shows how to deploy your site on a web
server and how to get the site indexed on the major search engines and directories.</p>
</article>
</section>
</body>
</html>
CSS:
article, aside, figure, footer, header, nav, section {
display: block;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 82.5%;
margin: 0 auto;
width: 690px;
height: 850px;
border: 2px solid blue;
}
section {
padding: 20px;
}
h1, h2, article, p {
margin: 0;
padding: 0;
}
h1 {
font-size: 150%;
margin-bottom: 5px;
}
h2 {
font-size: 110%;
margin-bottom: 4px;
}
article {
-moz-column-count: 2;
-webkit-column-count:2;
column-count: 2;
-moz-column-gap: 25px;
-webkit-column-gap: 25px;
column-gap: 25px;
}
p {
margin-bottom: 6px;
}
ul {
margin-top: 0;
margin-bottom: 0;
padding-left: 1em;
}
li {
margin-bottom: 4px;
}
li.last {
margin-bottom: 6px;
}
#author {
padding-bottom: 2px;
border-bottom: 1px solid black;
margin-bottom: 15px;
}
Going to need to the javascript:
Solution
<!DOCTYPE HTML>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Pull Quotes</title>
<script src=\"http://html5shiv.googlecode.com/svn/trunk/html5.js\"></script>
<script src=\"http://code.jquery.com/jquery-latest.min.js\"></script>
<style>
q{
font-size:24px;
}
article, aside, figure, footer, header, nav, section {
display: block;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 82.5%;
margin: 0 auto;
width: 690px;
height: 850px;
border: 2px solid blue;
}
section {
padding: 20px;
}
h1, h2, article, p {
margin: 0;
padding: 0;
}
h1 {
font-size: 150%;
margin-bottom: 5px;
}
h2 {
font-size: 110%;
margin-bottom: 4px;
}
article {
-moz-column-count: 2;
-webkit-column-count:2;
column-count: 2;
-moz-column-gap: 25px;
-webkit-column-gap: 25px;
column-gap: 25px;
}
p {
margin-bottom: 6px;
}
ul {
margin-top: 0;
margin-bottom: 0;
padding-left: 1em;
}
li {
margin-bottom: 4px;
}
li.last {
margin-bottom: 6px;
}
#author {
padding-bottom: 2px;
border-bottom: 1px solid black;
margin-bottom: 15px;
}
</style>
</head>
<body>
<section>
<h1>Murach’s HTML5 and CSS3</h1>
<p id=\"author\">By Zak Ruvalcaba and Anne Boehm</p>
<article>
<p>HTML5 and CSS3 are changing how web pages are developed in some exciting new ways!
The trick is learning how to use this new functionality as quickly, as easily, and as
sensibly as possible.</p>
<p>That\'s where this book comes in. Whether you\'re new to web development...or whether
you\'re an experienced web developer who\'s been frustrated by the slow pace and gaping
holes in the other training you\'ve tried...this book was written for YOU.</p>
<h2>Get going fast</h2>
<p>In just the first 6 chapters of this book, you\'ll learn more about web development than
you can from most full books.</p>
<p>It\'s true! In fact, <span>by the end of the crash course in
Section 1, you\'ll be developing web pages the way today\'s best professionals do.</span>
That means you\'ll be using HTML5 semantic elements to mark up the structure of the
content on the page and CSS to format and lay out that content.</p>
<p>If you\'re new to the subject, you\'ll see why you need to use floating and the CSS box
model right from the start. If you\'ve used earlier editions of CSS, you\'ll be amazed at
how easily CSS3 lets you create pages with text and box shadows, rounded corners, gradients…
all without having to spend time on custom images for each effect!</p>
<h2>But that\'s just the beginning</h2>
<p>In Section 2, you\'ll see how to refine your web pages with the features that users
expect today. That includes:</p>
<ul>
<li>Providing attractive forms, with built-in data validation that doesn\'t require
the use of JavaScript the way it used to
<li>Ensuring that elements like links and images work in an intuitive way
<li>Adding audio and video clips to your pages
<li>Formatting your web content for easy printing
<li class=\"last\">And more!
</ul>
<h2>Where JavaScript and jQuery fit in</h2>
<p><span>Using JavaScript code, you can provide the special effects that are so engaging to web
site visitors.</span> At one time, you had to be a JavaScript expert to do the coding yourself.
But today, you can take advantage of the many ready-to-use JavaScript routines that are
available on the web...especially those in the popular jQuery libraries.</p>
<p>So Section 3 in this book gets you started. It shows you how to:
<ul>
<li>use tested JavaScript code to enhance your web pages with features like image
rollovers, image swaps, and slide shows
<li>use jQuery to enhance your web pages with features like accordions, carousels, and
popup boxes
<li>use jQuery Mobile to develop web pages for mobile devices with the look and feel of
native applications
<li class=\"last\">start using the HTML5 features that require the use of JavaScript, like embedded fonts,
geolocation, and canvas
</ul>
<p>You\'re still going to want to know some JavaScript so that you can tweak the code to suit
your needs. When you\'re ready to learn that, please see our JavaScript book.</p>
<h2>Design and deployment</h2>
<p>Finally, Section 4 rounds out your skills with chapters on web design and deployment.</p>
<p>Once you have a good grasp of how to develop web pages, you can understand the kinds of
decisions you have to make in designing a site, and chapter 17 shows you how to do that using
today\'s best practices. Then, chapter 18 shows how to deploy your site on a web
server and how to get the site indexed on the major search engines and directories.</p>
</article>
</section>
<script>
$(\"span\").each(function(index, elem){
//create new q dom
var q = $(\'<q>\');
//cap first char
elemtext = $(elem).text();
$(q).text(elemtext.substr(0,1).toUpperCase() + elemtext.substr(1));
//get parent p and insert after it
var par = $(elem).parent();
$(q).insertAfter($(par));
});
</script>
</body>
</html>
-------------------------
I have added javascript under script tag before body is closed.
hastebin link in case formating get lost: http://www.hastebin.com/rosiyojimu.xml
