CST8285-310 Web Programming - Midterm Exam

Friday, OCT-21, 2022

* Last Name ______________________________________

* First Name ______________________________________

* Student # _______________________________________

Instructions

  1. All electronic devices must be turned off : laptops, phones, tablets, calculators. They must be removed from your desk.
  2. This is a closed book test.
  3. Fill out all the information above, then sign below and date.
  4. Fill in the bubbles in your Scantron corresponding to your name and student id.
  5. Answer on the Scantron in pencil.
  6. Return the test book at the end of the exam. Do not remove any page from it.
  7. All exams must be returned to your professor.
  8. You must sign out before leaving the test room.
  9. If you have a question, raise your hand and the professor will come to you.

I have read, understood and will comply with the above instructions

Signature _________________________________________

Date ______________________________________________




1. The main purpose of the <body> element is to hold all of the document's actual content that is meant to be seen or interacted with by the page's visitor.

Answer True - A Correct: Anything between the opening and closing tags is visible to the user by default.




2. The main purpose of the <head> element is that it contains information that helps the browser understand what the page is about, what it should look like, and any other behind-the-scenes information.

Answer True - B Correct: The element contains information that helps the browser understand what the page is about, None of this content is displayed on the webpage.




3. Given the following CSS selector, which HTML element would be the outermost/parent element?

header nav ul li { color: white; }

Answer:

B



Answer: Relative pathing A



5. What is the difference between a class and an id?

Answer: A class can be used multiple times on a page, an id can only be used once. C



6. What is the difference between a div and a span?

Answer: A div is a block element, a span is an inline element. A



7. True or false: the * selector in CSS selects all HTML elements and applies a style to them.

Answer: True A



8. What is the purpose of the alt attribute for images?

Answer: To provide context for the image D



9. How can you add more than one class to an HTML element?

Answer: Add a space between the class names C



10. If you need to position a child element in relation to its parent element, which value should you set the position property to?

Answer: relative D Relative positioning allows you to modify the position of a child element in relation to its parent element.




11. How do you create a flexbox?

Answer: display: flex; A Correct: Yes, this is the correct syntax for creating a flexbox. As flexbox was being tested with browsers, it was first implemented using display: flexbox then display: box. When it was finally ready for widespread browser adoption, display: flex was used so it wouldn’t conflict with the other two previous values.




12. What is a pseudo-class?

Answer: A CSS keyword to target an element's state. C Correct: A pseudo-class is a CSS keyword that targets an element's state. For example, the :hover pseudo-class targets an element when the user hovers over it with their mouse.




13. By default, in which direction does a flexbox lay out its items?

Answer: A row (horizontal), with all of the child elements laid out side by side. A Correct: When we apply display: flex to an HTML element’s layout, it will automatically try to place all of that element’s child items alongside one another horizontally.




14. What is the purpose of the justify-content property in CSS?

Answer: To align the content of a flexbox A Correct: The justify-content property is used to align the content of a flexbox. It can be used to align the content of a flexbox to the left, right, center, or space between the items.




15. Based on the following code, which statement is correct?

@media screen and (max-width: 768px) { h1 { color: #c0ffee; } }

Answer: When viewed on a digital screen and the browser is 768px wide or smaller, the

element will have a color of #c0ffee. A

Correct, This media query selects the screen media type and looks for a browser feature of having a max-width of 768px or less. If it does, the style between the curly braces will be applied




16. What does the z-index property do?

Answer: Changes the stacking order of elements. B Correct: The z-index property changes the stacking order of elements. Elements with a higher z-index will appear on top of elements with a lower z-index.




17. A DNS server's primary role is to convert _____.

Answer: The domain name to an IP address. A Correct: A DNS server's takes in a domain name looks up the IP address associated with it and returns it to the client.




18. The tag used to define a new cell in a table is;

Answer: <td>. D Correct: The <td> tag is used to define a new cell in a table.




<link rel="stylesheet" src="style.css">

Answer: True. A Correct: The <link> tag is used to link to an external CSS file.




20. What are the best uses for HTML's div and span elements?

Answer: To group elements, or mark up a section of text. C Correct: The <div> and <span> elements are used to group elements, or mark up a section of text.




21. You can use the same class name on multiple elements?

Answer: True. A



22. Select the statement below that defines a css style class named error that will change the background color to yellow and the text color to red.

Answer: .error { background-color: yellow; color: red; }. C Correct, the class selector is denoted by a period (.) and the id selector is denoted by a hash (#).




23. What is the size of an IP address in IPv4?

Answer: 32 bits. A Correct: IPv4 uses 32-bit addresses, which are written as four numbers, each ranging from 0 to 255, separated by periods.




24. Which of the following HTML tags is not valid?

Answer: <author>. D Correct: The <author> tag is not a valid HTML tag.




25. Which property determines the font (e.g. Arial, Tahoma) a text element is displayed in?

Answer: font-family. C Correct: The font-family property determines the font (e.g. Arial, Tahoma) a text element is displayed in.




26. Where is an internal style sheet located?

Answer: In the <head> section. A Correct: An internal style sheet is located in the <head> section of an HTML document.




27. div { } What kind of simple selector is used in the above snippet?

Answer: Element. C Correct: The element selector selects all elements of the specified type.




28. The id selector overrides the class selector

Answer: TRUE. A Correct: The class selector is denoted by a period (.) and the id selector is denoted by a hash (#). The id selector overrides the class selector.




29. To create space outside the border of an element, you can use the ________ property.

Answer: margin. B Correct: The margin property is used to create space outside the border of an element.




Answer: A hover a:hover. D Correct: The a:hover selector is used to change the style of a link when the mouse cursor is over it.




31 Which of the following is the correct order of priority?

Answer Inline style > Internal style > External style. A Correct: Inline style > Internal style > External style




32 Which property defines in which direction the container wants to stack flex items?

Answer: flex-direction. A Correct: The flex-direction property defines in which direction the container wants to stack flex items.




33 What does HTTP stand for?

Answer: Hyper Text Transfer Protocol. B Correct: HTTP stands for Hyper Text Transfer Protocol.




34 What is the correct HTML for referring to an external style sheet?

Answer: <link rel="stylesheet" type="text/css" href="mystyle.css">. A Correct: The <link> tag is used to link to external style sheets.




Answer: <a href="http://www.w3schools.com">W3Schools.com</a>. C Correct: The <a> tag defines a hyperlink, which is used to link from one page to another.




36 Which of the following is a valid CSS property?

Answer: all of the above. D Correct: All of the above are valid CSS properties.




37 Which character is used to indicate an end tag?

Answer: A forward slash /. A Correct: The forward slash (/) is used to indicate an end tag.




38 Which of the following is the correct way to write a comment in HTML?

Answer: A Correct: HTML comments start with > and end with.




39 What is the correct HTML for making a text input field?

Answer: <input type="text">. B Correct: The <input> tag is used to create interactive controls for web-based forms in order to accept data from the user.




40 What is the correct HTML for making a checkbox?

Answer: <input type="checkbox">. D Correct: The <input> tag is used to create interactive controls for web-based forms in order to accept data from the user.




41 What is the correct HTML for making a drop-down list?

Answer: <select>. C Correct: The <select> tag is used to create a drop-down list.




42 What is the correct HTML for making a text area?

Answer: <textarea>. A Correct: The <textarea> tag is used to create a multi-line text input control.




43 This will create a list with 3 items which will be displayed as a numbered list.

Answer: <ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>. C

Correct: The <ol> tag defines an ordered list. Each list item must be placed between an <li> tag. The <li> tag defines a list item.




44 Block elements are normally displayed without starting a new line.

Answer: False. B Correct: Block elements are normally displayed without starting a new line.




45 A wireframe is a visual guide that represents the skeletal framework of a website.

Answer: True. A Correct: A wireframe is a visual guide that represents the skeletal framework of a website.