Scribd
Upload
13 views

Chapter 1

Uploaded by

faris.hakmi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views

Chapter 1

Uploaded by

faris.hakmi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

### Chapter 1: Getting Started in Web Design

1. What does the user experience designer primarily produce?


- A) HTML and CSS documents
- B) Storyboards
- C) "Look and feel" deliverables
- D) PHP scripts

2. What does the W3C do?


- A) Writes CSS for web pages
- B) Guides the development of web-related technologies
- C) Develops PHP and Ruby frameworks
- D) Creates web hosting services

3. What is Ruby primarily used for in web development?


- A) Checks a form field for a valid entry
- B) Creates a custom server-side web application
- C) Identifies text as a second-level heading
- D) Makes all second-level headings blue

4. What is the primary difference between frontend and backend web development?
- A) Frontend deals with database management, while backend deals with the
browser interface.
- B) Frontend involves server-side logic, while backend focuses on user
interactions.
- C) Frontend is browser-related, while backend focuses on applications and
databases on the server.
- D) There is no difference; they are the same.

5. What does an FTP tool do?


- A) Converts HTML into CSS for browser rendering
- B) Transfers files between computers over the internet
- C) Hosts websites on a server
- D) Builds PHP-based applications

---

### Chapter 2: How the Web Works

6. Which protocol is used to transfer web documents on the internet?


- A) FTP
- B) CSS
- C) HTTP
- D) IP

7. Which organization is responsible for monitoring web technologies?


- A) W3C
- B) CERN
- C) NCSA
- D) DNS

8. What does URL stand for?


- A) Uniform Resource Link
- B) Universal Resource Locator
- C) Uniform Resource Locator
- D) Universal Reference Link

9. What is the main purpose of DNS?


- A) Transfers files over the internet
- B) Matches domain names to numeric IP addresses
- C) Creates web browser interfaces
- D) Secures online communications

10. Where was the web first developed?


- A) W3C headquarters
- B) CERN
- C) NCSA
- D) NASA

---

### Chapter 3: Big Concepts

11. Which technology addresses the issue of varying screen sizes?


- A) Server-side detection
- B) Responsive design
- C) Site performance optimization
- D) Progressive enhancement

12. What is a waterfall chart used for?


- A) To visualize the distribution of user interactions on a website
- B) To evaluate a website’s performance during optimization
- C) To test different CSS properties
- D) To analyze JavaScript runtime

13. Which of the following is a measure to improve accessibility for visually impaired
users?
- A) Add captions to videos
- B) Use semantic HTML and logical content order
- C) Ensure buttons are large and clickable
- D) Optimize site performance
14. What is the purpose of site performance optimization?
- A) To reduce page load time and improve user experience
- B) To make the site accessible for screen readers
- C) To increase CSS and HTML compatibility
- D) To minimize JavaScript usage

15. What is progressive enhancement?


- A) A design method that ensures basic functionality in all browsers
- B) A way to progressively load large images
- C) A framework for advanced CSS features
- D) A method to ensure a page works offline

---

### Chapter 4: Creating a Simple Page

16. What is the difference between a tag and an element in HTML?


- A) Tags are the content inside elements.
- B) Tags delimit elements, while elements include tags and content.
- C) Tags are semantic markers, and elements are visual tools.
- D) There is no difference.

17. Which filename is valid for a web document?


- A) %whatever.html
- B) index.doc
- C) Sunflower.html
- D) cooking home page.html

18. How would you write a comment in HTML?


- A) # This is a comment
- B) // This is a comment
- C) <!-- This is a comment -->
- D) /* This is a comment */

19. Which attribute is missing in this HTML snippet? `<img "birthday.jpg">`


- A) `src`
- B) `alt`
- C) `href`
- D) `id`

20. What is the minimal markup required for an HTML5 document?


- A) `<html><head></head><body></body></html>`
- B) `<DOCTYPE html><html><body></body></html>`
- C) `<!DOCTYPE
html><html><head><title></title></head><body></body></html>`
- D) `<!DOCTYPE html><html></html>`

---

### Chapter 5: Marking Up Text

21. Which attributes must be included in every `img` element?


- A) `src` and `class`
- B) `src` and `alt`
- C) `href` and `alt`
- D) `href` and `title`

22. How do you make a thematic break between paragraphs in HTML?


- A) `<br>`
- B) `<hr>`
- C) `<div>`
- D) `<section>`

23. Which element displays whitespace exactly as it is typed into the source
document?
- A) `<pre>`
- B) `<code>`
- C) `<p>`
- D) `<blockquote>`

24. What is the difference between a `ul` and an `ol` element?


- A) `ul` lists are ordered by default, and `ol` lists are unordered.
- B) `ul` creates unordered lists, and `ol` creates ordered lists with sequence.
- C) `ul` is for visual lists, and `ol` is for semantic lists.
- D) There is no difference.

25. How do you remove bullets from an unordered list?


- A) Use a style attribute to set `list-style: none;`
- B) Delete the `<li>` tags
- C) Use JavaScript to hide the bullets
- D) Convert the list to a `<div>`

---

### Chapter 6: Adding Links

26. How would you create a link to another website?


- A) `<link href="http://example.com">Visit</link>`
- B) `<a href="http://example.com">Visit</a>`
- C) `<url src="http://example.com">Visit</url>`
- D) `<a>Visit</a>`

27. How would you link to a page in the same directory?


- A) `<a href="page.html">Visit</a>`
- B) `<a href="http://example.com/page.html">Visit</a>`
- C) `<a href="./page.html">Visit</a>`
- D) Both A and C

28. Which symbol is used to move up a directory in a relative URL?


- A) `../`
- B) `//`
- C) `..//`
- D) `./`

29. How would you create an email link in HTML?


- A) `<a href="mailto:[email protected]">Email Me</a>`
- B) `<a href="[email protected]">Email Me</a>`
- C) `<a href="mail:[email protected]">Email Me</a>`
- D) `<a>Email Me</a>`

30. How would you create a link that opens in a new tab?
- A) Add `target="_new"`
- B) Add `target="_blank"`
- C) Add `rel="external"`
- D) Add `target="new"`

---

### Chapter 7: Adding Images


31. Which attribute is required for accessibility in the `img` element?
- A) `alt`
- B) `title`
- C) `role`
- D) `src`

32. What is the correct syntax for embedding an image in HTML?


- A) `<img src="image.jpg" alt="Image">`
- B) `<image href="image.jpg" description="Image">`
- C) `<img alt="Image" src="image.jpg">`
- D) Both A and C

33. Which element is used to provide fallback text for an image?


- A) `<fallback>`
- B) `<alt>`
- C) `<img>`
- D) `<figure>`

34. What might cause an image not to display on a webpage?


- A) Incorrect file path
- B) Unsupported image format
- C) Missing file
- D) All of the above

35. What is the purpose of the `

srcset` attribute in an `img` element?


- A) To specify multiple image formats for fallback
- B) To provide responsive image options
- C) To specify image size in pixels
- D) To display alternative text

---

### Chapter 11: CSS Basics

36. What is a CSS selector?


- A) The part of a CSS rule that applies styles to elements
- B) The value assigned to a property
- C) The declaration block
- D) A specific HTML element

37. Which property would you use to change the text color in CSS?
- A) `font-color`
- B) `text-color`
- C) `color`
- D) `background-color`

38. What does the `z-index` property do in CSS?


- A) Changes the font size
- B) Adjusts the stacking order of elements
- C) Controls the horizontal position of elements
- D) Sets the opacity of elements

39. How do you create a CSS class?


- A) `.classname { ... }`
- B) `#classname { ... }`
- C) `classname { ... }`
- D) `@classname { ... }`
40. Which unit is relative to the root font size in CSS?
- A) `px`
- B) `%`
- C) `em`
- D) `rem`

---
Here’s an expanded set of **additional multiple-choice questions** covering more
chapters:

---

### Chapter 8: Working with Tables

41. Which tag is used to define a row in an HTML table?


- A) `<tr>`
- B) `<td>`
- C) `<th>`
- D) `<table>`

42. How would you create a table cell that spans two columns?
- A) Add `rowspan="2"` to the `<td>` element
- B) Add `colspan="2"` to the `<td>` element
- C) Add `span="2"` to the `<tr>` element
- D) Add `columns="2"` to the `<table>` element

43. What is the purpose of the `<caption>` tag in a table?


- A) To describe the contents of a table
- B) To create a footer row
- C) To center-align the table
- D) To format text inside cells

---

### Chapter 9: Forms

44. Which attribute is required to associate a `<label>` with a form element?


- A) `for`
- B) `id`
- C) `name`
- D) `value`

45. Which input type is used to create a password field?


- A) `<input type="text">`
- B) `<input type="password">`
- C) `<input type="hidden">`
- D) `<input type="secure">`

46. How do you make a form submit data to a specific URL?


- A) Add the `action` attribute to the `<form>` tag
- B) Use a `<button>` tag with a URL
- C) Add a `method` attribute to the `<form>` tag
- D) Use a `<link>` tag inside the form

47. Which attribute is used to specify that a form field must be filled out before
submission?
- A) `required`
- B) `validate`
- C) `mandatory`
- D) `checked`

---

### Chapter 10: Multimedia

48. Which element is used to embed a video file in HTML?


- A) `<embed>`
- B) `<video>`
- C) `<iframe>`
- D) `<media>`

49. What is the purpose of the `controls` attribute in the `<video>` tag?
- A) It adds playback controls to the video player.
- B) It defines the video source file.
- C) It specifies the aspect ratio of the video.
- D) It makes the video autoplay.

50. How can you embed an audio file in HTML?


- A) `<audio src="audio.mp3"></audio>`
- B) `<sound src="audio.mp3"></sound>`
- C) `<media src="audio.mp3"></media>`
- D) `<embed src="audio.mp3"></embed>`

---

### Chapter 12: Formatting Text

51. What does the `font-variant: small-caps;` CSS property do?


- A) Sets the font to all uppercase letters
- B) Displays lowercase letters as smaller uppercase letters
- C) Changes the font size to a smaller variant
- D) Transforms uppercase letters to lowercase

52. Which property would you use to center text horizontally in CSS?
- A) `align`
- B) `justify-content`
- C) `text-align`
- D) `vertical-align`

---

### Chapter 13: Colors and Backgrounds

53. Which color model uses percentages for red, green, and blue values?
- A) RGB
- B) HEX
- C) HSL
- D) CMYK

54. Which property is used to specify a background image in CSS?


- A) `background-color`
- B) `background-image`
- C) `image-src`
- D) `background-src`

---

### Chapter 14: Box Properties


55. What does the `margin` property control?
- A) The space inside an element’s border
- B) The space between an element and its surrounding elements
- C) The border width
- D) The overall size of the element

56. Which property is used to specify the space inside an element’s border?
- A) `padding`
- B) `margin`
- C) `border-spacing`
- D) `width`

57. How would you apply a dashed border around an element?


- A) `border: dashed 1px black;`
- B) `border: 1px black dashed;`
- C) `border-style: dashed; border-width: 1px;`
- D) All of the above

---

### Chapter 15: Floating and Positioning

58. What does the `float` property do?


- A) Allows elements to overlap
- B) Positions an element to the left or right of its container
- C) Centers an element horizontally
- D) Removes an element from the document flow

59. Which value of the `position` property ensures the element always stays in the
same place relative to the viewport?
- A) `relative`
- B) `absolute`
- C) `static`
- D) `fixed`

60. What does the `clear` property do in CSS?


- A) Clears the background of an element
- B) Prevents elements from appearing beside floated elements
- C) Removes the float from an element
- D) Sets the transparency of an element

---

### Chapter 16: CSS Layouts with Flexbox and Grid

61. Which property is used to make a container a flexbox container?


- A) `display: flex;`
- B) `display: grid;`
- C) `flex-direction: row;`
- D) `flex: container;`

62. What is the difference between `align-items` and `justify-content` in flexbox?


- A) `align-items` is for the main axis, while `justify-content` is for the cross axis.
- B) `justify-content` aligns items along the main axis, while `align-items` aligns
items along the cross axis.
- C) They are the same property with different names.
- D) `align-items` adjusts item size, while `justify-content` positions them.

63. Which property defines the space between rows in a CSS grid layout?
- A) `grid-gap`
- B) `row-gap`
- C) `gap`
- D) `grid-row-spacing`

64. Which property allows an item in a grid to span multiple columns?


- A) `grid-column`
- B) `column-span`
- C) `span`
- D) `grid-column-start`

---

### Chapter 17: Responsive Web Design

65. What does this meta tag do?


`<meta name="viewport" content="width=device-width, initial-scale=1">`
- A) It enables responsive design by setting the viewport width to the device
width.
- B) It ensures the site only works on desktop browsers.
- C) It centers the page on mobile screens.
- D) It defines the layout grid for the webpage.

66. Which CSS unit is commonly used in media queries to define breakpoints?
- A) `px`
- B) `em`
- C) `rem`
- D) `%`

67. How can you make an image responsive?


- A) Use the `max-width: 100%;` property.
- B) Use the `width: auto;` property.
- C) Use the `height: fit-content;` property.
- D) Use the `responsive: true;` property.

---

### Answer Key


B
B
B
C
B
C
A
C
B
B
B
B
B
A
A
B
C
C
A
C
B
B
A
B
A
B
D
A
A
B
A
D
C
D
B
A
C
B
A
D

A
B
A
A
B
A
A
B
A
A
B
C
C
B
B
A
D
B
D
B
A
B
B
A
A
B
A

You might also like