IGME-230: Final Exam Study Guide

IGME-230: Final Exam Study Guide

Name: Your name ...

Due: Tuesday, May 9th before 5:00pm.

Instructions: Work through the entire Study Guide, typing answers to the questions (in the spaces provided in a color other than black). When you're done, submit the filled-in files to the Study Guide: Final Exam dropbox.

Your HTML and CSS files must be uploaded to Banjo at /www/230/studyguides/final_sg.html.

Add each exercise to your HTML file below the previous one, so the first is at the top and the last is at the bottom. Add spacing so they sections are clearly separated.

HTML Section

1) Write the code for a valid HTML5 document (i.e. a document that would validate).

Your answer ...

2) In HTML, how do you apply multiple classes to an element? Write an example of this in an HTML tag.

Etc. ...

3) Make a new valid HTML5 document (final_sg.html). Inside of it, create an unordered list with three list items:

You don’t need any CSS styling for these. Just the plain HTML will do.

· Validate the page using http://validator.w3.org/nu.

· You will be adding to this file and saving it on banjo at the end of the exercise.

4) Write the HTML code for the following table structure in HTML (don’t worry about the borders/style). Hint: use <table>, <tr> and <td> tags.

5) What is a block element? What does it do?

6) What is an inline element? What does it do?

7) Name a generic block-level container element that allows you to group together a set of elements:

Links Section

1) Utilizing the path information shown in the diagram below

· Write an <a> tag with a URL that connects p1.html to p2.html.

o Assume you are in p1.html.

· Write an <a> tag with a URL that connects p2.html to index.html

o Assume you are in p2.html

· Write an <a> tag with a URL that connects index.html to p2.html

o Assume you are in index.html

· Write an <img> tag with a URL that pulls in the file world.jpg.

o Remember all of the attributes of an image tag.

o Assume you are in p1.html

2) What does URL stand for?

3) Write out the full URL to your 230 folder on your Banjo account as you would in a web browser.

4) What is the most common video file format that browsers support?

Images Section

1) Why do we use the jpg format for images with a lot of color in them, such as a photograph? When is it better to use a png file?

2) Write the HTML necessary for an image tag that will display an image named "world.jpg". Hint: Remember all of the required attributes for an image.

CSS Section

1) Which tag is used to connect an HTML page to an external style sheet? Write a valid example of the tag below. It should pull in a file called style.css.

2) What are floats and how are they used in making column layouts?

3) What CSS property do we use to clear floats? Write an example of it below.

4) How did we measure column widths to make them fluid (dynamically adjust with the page size)?

5) Write a CSS rule that makes all of the p elements on the page be blue in color and have the font-family tahoma.

6) Write a CSS style rule that makes an element of id="navbar" have a padding of 4px, a top margin of 10px and a font size of 1.5em.

7) Write a CSS style rule that makes an element of class="description" have a left float and has the text underlined.

8) In HMTL/CSS, when do you use ids?

9) In HTML/CSS, when do you use classes?

10) Write a style rule that will cause hypertext links to turn red when moused over:

11) Give the hexadecimal value of the color blue. Hint: Remember RGB order.

12) Give the hexadecimal value of the color red. Hint: Remember RGB order.

13) What is the CSS property we use to tell an element to animate any properties that change between states?

14) Draw the CSS Box Model below.

15) In the Box Model, what is outside of padding?

16) In the Box Model, what is the outer most box?

17) What is a media query?

18) Write a media query to detect if the page size is 480px or less and change the background of a section with the id="part1" to a background color of green.

19) Write another media query to detect if the page size is 720px or less and change the background of a section with the id="part1" to a background color of red.

Other

1) On Banjo, what happens when you name a file index.html? Why is it useful?

2) What is the name of the file you put into folders on Apache servers to modify the configuration? Hint: You did this on Banjo for password protection.

3) What is the Apache directive for setting a default web page instead of index.html?

4) Write an example of an Apache directive that sets the default web page for a folder to myPage.html

5) What is the Apache directive for handling an error (such as a 404 error) on a web page?

6) Write an example of an Apache directive that handles a 404 error and shows the page my404.html. Assume my404.html is inside of your www folder.

7) RIT’s banjo.rit.edu web server uses SFTP/FTP. What is FTP? What is SFTP and why do we use it over FTP?

8) What does C.R.A.P stand for?

9) List the 4 Layers of Web Design (or Pillars of Web Design) and give a brief description of each.

10) What is the rule of thirds?

20) What is negative space (white space)?

SVG

1) What does SVG stand for?

2) Describe one advantage of using an SVG over a .png file.

3) List three SVG elements.

4) SVG is a flavor of HTML. True or False

5) Given an SVG circle element with an id of ‘mycircle’, write the CSS below that

changes its fill color to be red.

JavaScript

1) The following code does not behave as expected because the elements on the page will not be available when the JavaScript runs. The script is running before the elements are parsed and put onto the page.

<!DOCTYPE html>

<html>

<head>

<title>Movies</title>

<script>

function init() {

var myH1 = document.querySelector("#main");

myH1.innerHTML="Welcome to my page";

}

init();

</script>

</head>

<body>

<h1 id="main">This is my my header</h1>

</body>

</html>

1) Describe how to fix this problem (without JQuery).

2) Explain what "use strict" does in JavaScript.

3) Write a function called multiply that accepts two numbers as arguments. This function will multiply the two numbers together and return the result.

4) Update your HTML5 document.

Create the function that you wrote above in JavaScript.

Have the init function call your new multiply function with the numbers 5 and 10, then have your init function print out the result.

5) Write JavaScript code that uses the setTimeout() method to call a function named "test" 1 second after the page has fully loaded.

6) Update your HTML5 document.

Create a JavaScript function called test that displays "I love <insert band here>".

Make sure your setTimeout code calls the test function 1 second after page load.

10) Using JavaScript (Not jQuery), write code that grabs a single element on the page with the ID "main" using document.querySelector.

21) Write JavaScript to change the background color of an element with the ID "main" to blue.

22) Update your HTML5 document.

Create a section tag in the body with the ID "main"

Use CSS to set the section to 300px wide and 300px high.

Use JavaScript to set the background color of the "main" section to blue

23) Explain why images in JavaScript have an onload function.

24) Write an example of an image’s onload function in JavaScript. When the image loads, print out "The internet needs more cats".

25) What value will JavaScript assign to a variable if your variable was never given a value?

26) Write JS code that causes the paragraph text to be replaced with "new text" when this link is clicked.

<a id="myLink" href="#" >Click Here</a>

<p id="myPara" >This is my paragraph</p>

27) Update your HTML5 file.

In the HTML, add the link and paragraph from the previous question

In JavaScript, recreate the code you wrote in the previous question. When you click the link, the paragraph text should be changed to "new text".

28) Given the following HTML, write JavaScript to create a new section tag and append it to the div below.

<div id="container" >

...

</div>

29) Write JavaScript code that counts from 1 to 100. If the number is a multiple of 3, print "fizz". If the number is a multiple of 5, print "buzz". If the number is both a multiple of three and five, also print "FizzBuzz". (Note: This is a twisted variant of the famous programming test "FizzBuzz".)

31) Given a button named btn, what is an advantage of using

btn.addEventListener(‘click’,myHandler)

vs.

btn.onclick = myHandler

… to add a click event?

32) Why would we use pointer events instead of mouse events for interactivity?

33) Describe what the following three expressions do:

a = 1

a == 1

a === 3

34) Write the JavaScript code to append values 4, 5, and 6 to the following array:

nums = [1,2,3]

35) Given an array named foo, write the JavaScript code to access its last element:

BONUS

1) What does AJAX stand for?

2) Why must we use a callback function to process data returned from an AJAX call?

Don’t forget to validate your HTML file, upload it to banjo, and test it in the preview tool on the class home page!