wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

SY26 KP HTML5/CSS Study Guide

Total questions: 44

Worksheet time: 31mins

Name
Class
Date
1.

Which of the following can be placed inside a <table> tag?

Select all that apply.

a)

none of these

b)

images

c)

other tables

d)

text

2.

Why is it important to include a proper <!DOCTYPE> declaration at the beginning of an HTML document?

a)

It guarantees that embedded videos and audios will play correctly.

b)

It optimizes the document for mobile viewing.

c)

It ensures compatibility with all web hosting servers.

d)

It provides a standard to which the document will be validated.

3.

HTML markup language is a set of Markup _____.

a)

Attributes

b)

Tags

c)

Groups

d)

Sets

4.

What is the standard order for setting values in the shorthand property for margin and padding (e.g., margin: 10px 5px 15px 5px;)?

a)

Right, Top, Left, Bottom

b)

Top, Right, Bottom, Left

c)

Bottom, Right, Top, Left

d)

Right, Left, Top, Bottom

e)

Top, Left, Bottom, Right

5.

Which tag signifies the beginning of an HTML5 document?

a)

<HTML5>

b)

<!HTML>

c)

<!DOCTYPE html>

d)

<!DOCTYPE html4>

e)

<html version='5'>

6.

Which of the following is a correct way to comment out multiple lines in a CSS file?

a)

-- This is a comment --

b)

// This is a comment //

c)

<!-- This is a comment -->

d)

/* This is a comment */

e)

# This is a comment #

7.

Given the HTML below, how can a programmer style multiple elements inside the same container using CSS?

<div class="area">

<h1>Heading</h1>

<p>Paragraph text</p>

</div>

a)

div.area h1{ font-family: Arial, Helvetica, sans-serif; }

b)

.area { font-family: Arial, Helvetica, sans-serif; }

c)

.area h1{ font-family: Arial, Helvetica;}

d)

.area h1{font-family: Arial, Helvetica, sans-serif;}

8.

If you want to load an external icon font library, which HTML tag would typically be used to reference it from a CDN?

a)

<script src='...'></script>

b)

<icon src='...'>

c)

<font src='...'>

d)

<link rel='stylesheet' href='...'>

e)

<style src='...'>

9.

What is the primary purpose of the <title> tag inside the <head> section of an HTML document?

a)

To add a comment for developers.

b)

To display a headline on the page.

c)

To style the text inside the body.

d)

To link external scripts.

e)

To set the page's title as seen on browser tabs and search engine results.

10.

In the CSS box model, which property defines the space between the border and the actual content?

a)

gap

b)

margin

c)

border

d)

padding

e)

spacing

11.

Which property can help in identifying elements that exceed their containing element's width, potentially causing layout issues?

a)

border-radius: 50%;

b)

overflow: hidden;

c)

background-color: red;

d)

outline: 1px solid red;

e)

max-width: 100%;

12.


What is the primary role of the <head> section in an HTML document?

a)

To ensure website compatibility with all browsers

b)

To display headers and navigation

c)

To hold meta-information, links to stylesheets, and other non-visible data

d)

To contain the website's main content

e)

To provide the footer information

13.

Which tag in an HTML form creates a dropdown list for users?

a)

<list>

b)

<dropdown>

c)

<menu>

d)

<select>

e)

<optionlist>

14.

For a list where items are marked with numbers, you would use:

a)

<ul>

b)

<ul type='I'>

c)

<ol type='A'>

d)

<ol>

e)

<li type='1'>

15.

Which tag is used to create an ordered list?

a)

<ul>

b)

<ol>

c)

<list>

d)

<dl>

e)

<li>

16.

To apply a background image to an element from a source named 'image.jpg', which of the following CSS codes is correct?

a)

background-source: url('image.jpg');

b)

background-img: url('image.jpg');

c)

wallpaper: image.jpg;

d)

backdrop: url('image.jpg');

e)

background: url('image.jpg');

17.

Which style is applied to the H1 heading by default ?

a)

Italic

b)

Bold

c)

Bold and Underline

d)

Underline

18.

Which CSS property is used to define a container as a grid layout?

a)

layout: grid;

b)

display: grid;

c)

display: flex;

d)

box: grid;

e)

display: block;

19.

Where would you typically find an internal stylesheet?

a)

Within the body content of an HTML document

b)

Within the <script> tag

c)

Within the <link> tag

d)

Within an external .css file

e)

Within the <head> section of an HTML document using the <style> tag

20.

Which of the following tags is used to create an ordered list?

a)

<li>

b)

<olist>

c)

<list>

d)

<ul>

e)

<ol>

21.

Choose the correct difference between the <ul> and <ol> tags.

a)

<ul> is for an unordered list, and <ol> is for an ordered list

b)

<ol> is for a list of options to be presented to the user and <ul> is an ordered list

c)

<ul> is used for creating unordered lists and <ol> is for tables

d)

The only difference between the two is styling such as italics and bold text

22.

Which ARIA attribute is used to specify that an element controls the appearance or disappearance of another element?

a)

aria-hidden

b)

aria-labelledby

c)

aria-live

d)

aria-label

e)

aria-controls

23.

Which of the following parts is not a valid part of the CSS box model?

a)

Absolute

b)

Padding

c)

Border

d)

Content

24.


Order the HTML tags such that the largest heading is at the top and the smallest is at the bottom.

a)

<h1>

b)

<h2>

c)

<h3>

d)

<h4>

e)

<h5>

1)
2)
3)
4)
5)
25.

Which pseudo-class targets only the element that the user is currently hovering over?

a)

:active

b)

:focus

c)

:target

d)

:hover

e)

:over

26.

Observe the following HTML code below. Which is the correct way to apply a CSS rule to set the margins to automatic?

<div class="section1">

Text Section

</div>

a)

divsection1 { width: 100px; margin: auto; }

b)

div{ section 1; width: 100px; margin: auto; }

c)

div.section1 { width: 100px; margin: auto; }

d)

div section 1 { width: 100px; margin: auto; }

27.

Which CSS property allows you to set breakpoints for different screen sizes in responsive design?

a)

@media

b)

@break

c)

breakpoints

d)

sizes

e)

media-queries

28.

How does a web browser primarily interact with HTML 5 content?

a)

By compressing the content for faster internet speeds

b)

By rendering the defined structure and content for display to users

c)

By converting it into machine code for execution

d)

By translating it into different languages for global users

e)

By saving the content for offline storage and retrieval

29.

If you wanted to create a list with bullet points, which type of list would you use?

a)

Unordered list

b)

Checklist

c)

Ordered list

d)

Description list

e)

Sequential list

30.

If you want a hyperlink to open in a new browser tab or window, which attribute value would you use for the target attribute?

a)

_top

b)

_self

c)

_parent

d)

_blank

e)

_new

31.

If you have multiple elements you want to style in the same manner, which selector would be most appropriate?

a)

ID selector

b)

Inline style

c)

Class selector

d)

Element selector

e)

Pseudo-class selector

32.

Which HTML tag is used to create a form?

a)

<textbox>

b)

<form>

c)

<fieldset>

d)

<input>

e)

<submit>

33.

Which HTML tag is used to create a form?

a)

<stylesheet href='styles.css'></stylesheet>

b)

<link rel='stylesheet' type='text/css' href='styles.css'>

c)

<style src='styles.css'></style>

d)

<css src='styles.css'></css>

e)

<link rel='stylesheet' type='text/html' href='styles.css'>

34.

Which of the following is a key benefit of using external style sheets?

a)

They allow for consistency across multiple web pages without repeating code.

b)

They are easier to write than inline styles.

c)

They improve the speed of website loading.

d)

They can create animations and transitions.

e)

They can store data for a website.

35.

Observe the following code. Suggest one reason as to why there are 3 different classes in the snippet.

<div class="dropdown">

<button class="dropbutton">Dropdown</button>

<div class="dropdown-content">

<a href="http://www.link1.com">Site 1</a>

<a href="http://www.link1.com">Site 2</a>

</div>

</div>

a)

The different classes are required otherwise an error would occur

b)

They can each have an individual style applied to them

c)

The classes are needed for the links to work

d)

The div HTML attribute needs the classes to support it

36.
To ensure a site's pages render as expected by the target audience, regardless of the device used to access them, which design model should be followed?
a)
Dual platform design
b)
HTML Transitional 1.0 design
c)
Responsive Web Design
d)
Cascadingd Style Sheet design
37.
__________describes the ability to create pages that respond to user screen size and that work in multiple environments
a)
cloud computing
b)
text editor
c)
nerd power
d)
responsive design
38.


If you wanted to set a backup or default font in case the browser does not support the first font choice, which method would you use?

a)

font-choice: Arial or sans-serif;

b)

font-selection: Arial, sans-serif;

c)

font-set: Arial > sans-serif;

d)

font-type: Arial; else sans-serif;

e)

font-family: Arial, sans-serif;

39.

Which type of CSS has the highest specificity in case of a conflict?

a)

Universal selector CSS

b)

Inline CSS

c)

Internal stylesheet

d)

Pseudo-class CSS

e)

External stylesheet

40.

Observe the code example below which creates two unordered lists containing some basic text. From the options below, select the snippet which will apply the same rule to both lists equally.

a)

ul-names-ages { font-family: arial;}

b)

ul { font-family: arial;}

c)

ul-all { font-family: arial;}

d)

ul_ { font-family: arial;}

41.

A heading tag exists within the HTML with an id of ‘main_heading’. What would be the correct way to color it in blue with the CSS selector?

a)

main_heading { color: blue; }

b)

#main_heading { color: blue; }

c)

#main_heading color: blue;

d)

#main_heading { colorblue; }

42.

Which attribute is recommended to be used with the <blockquote> tag to reference the source of the quotation?


a)

href

b)

quote

c)

src

d)

ref

e)

cite

43.

Which property is used in CSS to adjust the size of an icon that's implemented as a font character?

a)

font-dimension

b)

font-scale

c)

font-size

d)

icon-size

44.

What is the relationship between the Content and the padding?

a)

The contents styling is dictated by the padding

b)

There is no relationship between content and padding

c)

The padding creates spacing between the content and the border

d)

The level of padding is always relative to the content above it

Similar Resources on Wayground

PRA ASTS INFORMATIKA

40 questions

PRA ASTS INFORMATIKA

quiz

Worksheet

•

7th Grade

PSA INFORMATIKA KELAS 8

40 questions

PSA INFORMATIKA KELAS 8

quiz

Worksheet

•

8th Grade

Review For G8

46 questions

Review For G8

quiz

Worksheet

•

6th - 8th Grade

Latihan Soal SAS Kelas 2

45 questions

Latihan Soal SAS Kelas 2

quiz

Worksheet

•

2nd Grade - University

SAS SEMESTER 2

40 questions

SAS SEMESTER 2

quiz

Worksheet

•

7th Grade

Tes Sumatif Informatika SMKN 1 Ngasem

45 questions

Tes Sumatif Informatika SMKN 1 Ngasem

quiz

Worksheet

•

8th Grade

Quiz ASAS INF kls 8

40 questions

Quiz ASAS INF kls 8

quiz

Worksheet

•

8th Grade

VIII ICT 2024

46 questions

VIII ICT 2024

quiz

Worksheet

•

8th Grade