Scribd
Upload
19 views19 pages

Chapter 1

Uploaded by

faris.hakmi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
19 views19 pages

Chapter 1

Uploaded by

faris.hakmi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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