CST 231 Web Systems Fall 2017 Due Friday, December 8, 2017 at 11:59pm. Choose three...

Question

Question

CST 231 Web Systems Fall 2017 Due Friday, December 8, 2017 at 11:59pm. Choose three...

CST 231 Web Systems Fall 2017

Due Friday, December 8, 2017 at 11:59pm. Choose three Problems Only.

100 points total

1 (25 pts.). The HTML document listed below (with gaps) is rendered as shown at right. The header at the top is an h3 element subject to a CSS rule (see below) causing its font to be Courier New. The boxed content is that of a p element whose class is box (see below), which specifies, among other things, a text box with a ridge border that floats left and occupies 65% of the width of the window. The contents of a p element flow around this text box. This p element starts with a span element with a bold style. The element just after this p element is an h4 element whose style prevents it from flowing up beside any element that floats left. Next, there is an unordered list that has two ordered lists nested within it. List items are specified in one stylesheet (see below) to be bold, but this is overridden for list items within ordered lists in an imported stylesheet; they are there specified to have normal weight and to be underlined.

The HTML document references the stylesheet prob1.css. This stylesheet imports the additional stylesheet prob1a.css and specifies that li elements be bold and that h3 elements have Courier New font or, if that is not available, some monospace font. Stylesheet prob1.css also defines a class box, which specifies a text box that floats left, has a ridge border style, has padding equal to half the height of a character, and has a margin equal to the height of a character.

Stylesheet prob1a.css has one rule: li elements inside ol elements have normal weight (not, e.g., bold) and are underlined.

The gaps in the HTML document are labeled with Greek letters, which are repeated after the listing along with descriptions of the corresponding missing code fragments; you there provide the missing code. The descriptions of the two stylesheets are then repeated; you there provide the stylesheets.

<html>

<head>

<title>Problem 1</title>

_a_______________________________________________________

</head>

<body>

<h3>Europe</h3>

<p _b_________>

Europe is, by convention, one of the world's seven

continents. Comprising the westernmost peninsula of

Eurasia, Europe is generally divided from Asia by

the Ural Mountains, the Ural River, the Caspian Sea,

the Caucasus Mountains, and the Black Sea.

</p>

<p>

<span _g_______________________>The European Union (EU)</span>

is an economic and political union of 27 member states, located

primarily in Europe. Committed to regional integration, the

EU was established by the Treaty of Maastricht on 1 November

1993 upon the foundations of the European Economic Community.

With almost 500 million citizens, the EU combined generates an

estimated 30% share (US$18.4 trillion in 2008) of the nominal

gross world product.

</p>

<h4 _d_________________>Some regions of Europe</h4>

<ul>

<li>Iberian Peninsula</li>

<ol>

<li>Spain</li>

<li>Portugal</li>

</ol>

<li>The Low Countries</li>

<ol>

<li>The Netherlands</li>

<li>Belgium</li>

<li>Luxembourg</li>

</ol>

</ul>

</body>

</html>

a (3 pts.): Link to the stylesheet prob1.css.

Answer:

b (2 pts.): Make box the class of this element.

Answer:

g (2 pts.): Make the contents of this element bold.

Answer:

d (3 pts.): Prevent this element from flowing up beside any element that floats left.

Answer:

Write the stylesheet prob1.css. This stylesheet imports the additional stylesheet prob1a.css and specifies that li elements be bold and that h3 elements have Courier New font or, if that is not available, some monospace font. Stylesheet prob1.css also defines a class box, which specifies a text box that floats left, has a ridge border style, has padding equal to half the height of a character, and has a margin equal to the height of a character.

Answer (15 pts.)

Write the stylesheet prob1a.css. It has one rule: li elements inside ol elements have normal weight (not, e.g., bold) and are underlined.

Answer (2.5 pts.)

2. (25 pts.). The screenshot at right shows the rendering of prob5.html. It links to the stylesheet prob5.css and references the jQuery file from the CDN as well as our local JavaScript file prob5.php (which contains only jQuery code). The following is a listing of prob5.html.

<html>

<head>

<title>Final, Problem 5</title>

<link type="text/css" rel="stylesheet" href="prob5.css" />

<script type="text/JavaScript"

src="http://code.jquery.com/jquery-1.10.2.js">

</script>

<script type="text/JavaScript" src="prob5.js">

</script>

</head>

<body>

<h4>Some Trees</h4>

<ul>

<li>Ash<//li>

<li>Elm<//li>

<li>Oak<//li>

</ul>

</body>

</html>

Stylesheet prob5.css defines one class, hilight, which simply specifies the italic font family. The following is a listing.

.hilight { font-style: italic }

The reason the li elements are italic in the rendering captured by the screenshot is that file prob5.js contains jQuery code that invokes an anonymous function when the DOM of the document is ready. This function has a single statement that selects all li elements and adds the class hilight to them. The following is a listing with a gap for this one statement. You provide the statement after the listing.

$(document).ready(function() {

___________________________;

});

Below, provide the statement that adds class hilight to all li elements in the document:

Answer

3 (25 pts.). The screenshot at right is a rendering (Safari with user agent iPhone) of prob6.html. This document, within a single page, has a header, and its content area contains a ul functioning as a listview. The following is a listing of prob6.html with a gap in the place of the header and content area.

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">

</script>

</head>

<body>

<div data-role="page">

Missing header

Missing content area

</div>

</body>

</html>

In the following space, write the header and the content area. (My solution has 11 lines.)

The header contains two elements:

an anchor (a) with href="https://www.google.com/" and text content Google and classes specifying a button with a search icon to the right of the text and

an h1 element with text content Some links.

The content area consists of a ul element functioning as a listview and containing two li elements. Both li elements contains anchors (a elements)

The first has href="http://www.ncat.edu" and has text content North Carolina A&T.

The second has href="http://www.acm.org/" and has text content ACM.

4 (25 pts.). Below is a rendering of the document prob1.html. Below it is a listing of this document with some gaps labeled with Greek letters. Specifically, you need to fill in a link element for stylesheet prob1.css (gap a) and apply class box to the p element (gap b) and class slim to the div and the ul elements (two g gaps). Stylesheet prob1.css specifies that span elements inside li elements have style italic, and it defines a class box for p elements that has them float left, occupy 60% of the width of the screen, and have a 20-pixel right margin. This stylesheet also defines a class slim (applicable to any element) specifying a two-pixel margin all around. The Greek-letter labels are repeated on the next page along with descriptions of what is to fill the gaps. You there provide this missing code. The description of the stylesheet rules is also repeated, and you there provide the stylesheet.

<html>

<head>

<meta charset="utf-8" />

<title>Final, Problem 1</title>

_a________________________________________________________

</head>

<body>

<p _b_________>

The Great Lakes (sometimes, Laurentian Great Lakes) or the

Great Lakes of North America are a series of interconnected

freshwater lakes located in northeastern North America

located in northeastern North America, on the Canada-United

States border, which connect to the Atlantic Ocean through

the Saint Lawrence River.

</p>

<div _g__________>The Great Lakes include</div>

<ul _g__________>

<li>Lake Superior (<span>31,700 sq mi</span>)</li>

<li>Lake Michigan (<span>22,300 sq mi</span>)</li>

<li>Lake Huron (<span>23,000 sq mi</span>)</li>

<li>Lake Erie (<span>9,910 sq mi</span>)</li>

<li>Lake Ontario (<span>7,340 sq mi</span>)</li>

</ul>

</body>

</html>

a (3 pts.): A link to the stylesheet prob1.css

Answer

b (3 pts.): Apply class box

Answer

g (3 pts., this occurs twice): Apply class slim

Answer

Now write stylesheet prob1.css (16 pts.).It has the following

A rule that specifies that span elements inside li elements have style italic

A rule that defines a class box for p elements that has them float left, occupy 60% of the width of the screen, and have a 20-pixel right margin

A rule that defines a class slim (applicable to any element) specifying a two-pixel margin all around.

Answer

Bonus: (10 pts) List 3 things you learn doing your final project.

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

CST 231 Web Systems Fall 2017 Due Friday, December 8, 2017 at 11:59pm. Choose three...

Homework Answers

Request Answer!

Add Answer to:
CST 231 Web Systems Fall 2017 Due Friday, December 8, 2017 at 11:59pm. Choose three...

Post as a guest

Earn Coins

Please edit and add all the code needed to make the images side by side and to put the buttons in...

In this problem, you will create a selectable “To Do” List. To add a task to...

URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to...

Hello Ive been tryting to add the CDN of jquery to my html code and I...

Hello, I was wondering if you could possibly think of ways to improve my home page then I would l...

Hello! I am to create a .js file that allows the paragraph on the bottom of...

Kindly assist in fixing the error i got when I pasted my codes to validate it....

given below are the project description and their Html and css files i need javascript according...

Modify an application that lets users add tasks to a list so the tasks can also...

As part of this assignment we are using the base Gallery HTML and writing JavaScript code...

CST 231 Web Systems Fall 2017 Due Friday, December 8, 2017 at 11:59pm. Choose three...

Homework Answers

Request Answer!

Add Answer to: CST 231 Web Systems Fall 2017 Due Friday, December 8, 2017 at 11:59pm. Choose three...

Post as a guest

Earn Coins

Add Answer to:
CST 231 Web Systems Fall 2017 Due Friday, December 8, 2017 at 11:59pm. Choose three...