IGME-230 Exam #1 Study Guide
Name
Due: Tuesday, March 7th. Your HTML and CSS files must be uploaded to Banjo at
/www/230/ /studyguides/midterm_sg.html (and midterm_sg.css).
This document should be submitted to the Exam 1 Study Guide dropbox. Be sure
to add your answers to this document in a different color for easier grading.
HTML Section
1) Write out the basic HTML structure of any web page. Save this in a file and check it
on http://validator.w3.org/nu/ to make sure it validates. You will be adding to this file
and saving it on banjo at the end of the exercise.
2) How do you write HTML attributes correctly? Write an example of an html attribute.
3) Update your HTML file to include a section tag with the id attribute set to “main”. Add
a p tag inside the section with your name as the content.
Validate the page. Make sure that your attribute syntax is correct!
http://validator.w3.org/nu/
4) How do you apply multiple classes to an element? Write an example of this in an
HTML tag.
5) Update your HTML file. Add the classes “left” and “main” to your section tag.
Validate the page. Make sure that your attribute syntax is correct!
http://validator.w3.org/
6) List at least two HTML tags that do not have closing tags. Explain why they do not
have a closing tag.
7) Update your HTML file. Inside your section tag:
-Create an ordered list with three list items
-Under the previous list create an unordered list with four list items
You don’t need any CSS styling for these. Just the plain HTML will do.
Validate the page. Make sure that your attribute syntax is correct!
http://validator.w3.org/nu/
8) Re-create the following table structure in HTML (don’t worry about the borders/style)
hint: use <table>, <tr> and <td> tags:
Write your code below:
9) Update your HTML file. Add a second section tag with the classes “right” and
”main”. Add your table inside the new section.
Validate the page. http://validator.w3.org/nu/
10)
What is a block element? What do they do?
11)
What is an inline element? What do they do?
12)
What are structural tags? Give at least 5 examples of structural tags.
13)
Which of the following elements are structural markup tags (check all that apply)
____ <section>
____ <div>
____ <br>
____ <b>
____ <em>
____
<h2>
____
<p>
____
<article>
____
<aside>
14)
Name a generic block-level container element that allows you to group together
a set of elements:
Links Section
15)
Utilizing the path information shown in the diagram above

write an <a> tag with a URL that connects p1.html to p2.html.
Assume you are in p1.html.

write an <a> tag with a URL that connects p2.html to index.html
Assume you are in p2.html

write an <a> tag with a URL that connects index.html to p2.html
Assume you are in index.html

Write an <img> tag with a URL that pulls in the file world.jpg.
Remember all of the attributes of an image tag. Assume you are in p1.html
16)
Update your HTML file. Add an anchor tag to your name that links to your class
home page.
Validate the page. http://validator.w3.org/nu/
17)
What does URL stand for?
Images Section
18)
There are 3 commonly used image formats on the web. For each, list why and
when they are most appropriately used:
1) JPG
2) GIF
3) PNG
4) ICO (bonus)
19)
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.
20)
Update your HTML file. Add an image with a valid img tag below the sections.
You provide the image (just make it appropriate). Be sure to add all appropriate
attributes.
Validate the page. http://validator.w3.org/nu/
CSS Section
21)
Which tag is used to connect an HTML page to an external style sheet? Write a
valid example of the tag below. It should reference a file called style.css.
22)
What are floats and how are they used in making column layouts?
23)
What CSS property do we use to clear floats? Write an example of it below.
24)
How did we measure column widths to make them fluid (dynamically adjust with
the page size)?
25)
Make a new CSS file called midterm_sg.css. You will put all of your CSS in this
file. You will need to link this CSS file into your HTML page.
Inside of the CSS:
1) Make it so that the first section floats left and the second section floats right.
2) Each column should take about 50% of the page.
3) Give each section a different background color.
1) For the left section, use a HEX based color value.
2) For the right section, use an RGB based color value.
4) Make the page fluid, so that when you resize the page the columns resize with
it.
5) Add a pseudo element to make the link on your name turn orange when
hovered.
Validate both your HTML and CSS - http://validator.w3.org/nu/
http://jigsaw.w3.org/css-validator/
Make sure your code is valid.
26)
Write a CSS rule that makes all of the p elements on the page be blue in color
and have the font-family tahoma.
27)
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.
28)
Write a CSS style rule that makes an element of class=”description” have a left
float and has the text underlined.
29)
In HMTL/CSS, when do you use IDs?
30)
In HTML/CSS, when do you use classes?
31)
Write a style rule that will cause hypertext links to turn red when the mouse is
over them:
32)
Give the hexadecimal value of the color blue. Hint: Remember RGB order
33)
Give the hexadecimal value of the color red. Hint: Remember RGB order
34)
Draw the CSS Box Model below
35)
In the Box Model, what is outside of padding?
36)
In the Box Model, what is the outer most box?
37)
What is a media query?
38)
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.
39)
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.
40)
Update your CSS file.
In your CSS,
1) Make the left section green when the window is narrower than 480px.
2) Make the right section red when the window is narrower than 720px.
Validate both your HTML and CSS - http://validator.w3.org/nu/
http://jigsaw.w3.org/css-validator/
Make sure your code is valid.
Other
41)
On Banjo (formerly called Gibson), what happens when you name a file
index.html? Why is it useful?
42)
RIT’s banjo.rit.edu web server uses SFTP/FTP. What is FTP? What is
and why do we use it over FTP?
43)
What does CRAP stand for?
SFTP
44)
List the 4 Layers of Web Design (or Pillars of Web Design) and give a brief
description of each.
A)
B)
C)
D)
45)
Upload your HTML and CSS files as indicated above and check them in the class
preview tool.