COMP 101 Spring 2017 EXAM 2 2 March 2017

Transcription

1 Name PID COMP 101 Spring 2017 EXAM 2 2 March 2017 This exam is open note, open book and open computer. It is not open people. You are welcome and encouraged to use all of the resources that you have been using all semester. You are to submit this exam through gradescope. Resubmissions have been enabled. It is an honor code violation to submit an update past the time allocated for the exam. Remember to save your work often. If you are having difficulty saving as a pdf, print the file but save it as a pdf. Each question is worth 10 points. You only need to answer 10 of the 12 questions. If you answer more than 10 questions, the highest 10 will be used. By submitting this exam, you are pledging that you have neither given nor received unauthorized help.

2 1. Write the HTML to create a link to the UNC website that uses an image, called leftarrow.svg, as the element to click on.

3 2. Write the CSS needed to position this div such that it is all the way to the left of the window and its top is 25% of the way from the bottom of the window. <div class=warning> <p>warning: laughing can cause uncontrollable mirth.</p> </div>

4 3. The provided CSS creates a blue gradient circle. Given the following HTML and CSS, you are to add classes to the HTML (nothing else) and write additional CSS (do not change the given CSS), to create two stacks of circles at the sides of the window. HTML: <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> CSS: div { background: radial-gradient(circle, #000080, #3333ff, #e6e6ff); height: 100px; width: 100px; border-radius: 50px; margin: 5px 0px; } That is, the result will look like

5 4. You have an image that is 700px x 800px and it is to be displayed inside of a figure. The relevant HTML snippet is <figure> <img src="washington.jpg" alt="george"> </figure> You are to write the CSS to display the image with a width of 350px and a solid orange border of 5px (no padding). The figure is to have a 5px solid green border and there is to be no space between the two borders. Hint: use pixel sizes, not percentages. The output will look like

6 5. You have 3 pages for your website all of which are styled the same except that they have different background images. The pages and their background images are: water.html uses waves.jpg earth.html uses forest.png fire.html uses flame.gif All of the images are stored in a subfolder called backgrounds. You want to use the same CSS for all of them and you want the images stretched to cover the full window. Write the body tag (just the one tag) for each of the pages and the css needed for those body tags. water.html earth.html fire.html css

7 6. Convert the following CSS to use only the hexadecimal format. Remember that the w3schools CSS color page provides hexadecimal equivalences for color names. W3schools also has a color converter page. body { background: azure; color: darkblue; ) div.content { border: 2px double rgb(47, 79, 79); border-radius: 25px; } div#banana { background: yellow; }

8 7. Write the HTML for displaying a video file called AnimalSounds.mp4 that is stored in a subfolder called Sounds. It should controls displayed and should be formatted with the following CSS:.highlighted { width: 500px; float: left; padding-right: 10px; }

9 8. Write the HTML for a button that when clicked generates an alert that prints You pressed the button!

10 9. Create the HTML for a figure that contains an image (Addition.JPG in the same folder as the page) with the figure caption Addition above the image. When the caption is clicked on, it generates an alert that prints The answer is: and the sum of 652 and 471. The sum is to be left as an expression to be computed. The result (with some formatting) could look like this:

11 10. You have an image with a caption centered below it that you want to float left. The image is in manatee.jpeg in the same folder as the page and the caption is Sea Cows. Write the HTML and CSS needed to make this happen.

12 11. You have an image called green_button.png that is 126px wide and 26px tall. Write the CSS that will use the image as the background for the button displayed with this HTML: <button class=green type=button>click</button>

13 12. Create a horizontal navigation bar from the following snippet be writing the correct CSS. You should assume that there are other lists and links on the page that you do not want to change and you may not change the HTML. <nav> <ul> <li><a href="who.html">who</a></li> <li><a href="where.html">where</a></li> <li><a href="when.html">when</a></li> </ul> </nav> The navigation bar should be all the way to the left edge and the list items should be next to each other. Do not worry if the there is a line between them. The text should be in white with a black background. There should be no underlining of the links. The text should be white and the background black. Colors should not change after the link is. The formatted navigation bar should look like