wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

Mid Term Review (HTML Basics and SkillStruck Units 1-3

Total questions: 80

Worksheet time: 7mins

Name
Class
Date
1.

Which of the following computer languages gives a website its structure (the bones of the website)?

a)

HTML

b)

CSS

c)

Java

d)

Javascript

2.

Which of the following computer languages dresses up the website (gives it design and visuals)?

a)

HTML5

b)

CSS

c)

Java

d)

Javascript

3.

Which of the following computer languages adds more functions to the website and makes it more interactive?

a)

HTML5

b)

CSS

c)

Java

d)

Javascript

4.
Which item refers to the start tag, the end tag and everything in between?
a)
HTML Element
b)
HTML Tag
c)
HTML Attribute
d)
CSS
5.
Which tag defines the visible content of a web document?
a)
<head>
b)
<meta>
c)
<title>
d)
<body>
6.

What does the "DOCTYPE" tell you?

a)

What type of HTML we are using.

b)

How to type a document

c)

Where the images should go

d)

What type of computer you are using

7.

Which section of an HTML file will not display on the actual webpage?

a)

html

b)

body

c)

head

d)

foot

8.

An attribute is always in the ____________.

a)

content

b)

opening tag

c)

closing tag

d)

head section

9.

Which is the format attributes follow?

a)

<name=value>

b)

"name=value"

c)

name=<value>

d)

name="value"

10.

Which tag in the head section will display on the tab at the top of the webpage?

a)
title
b)

heading

c)

html

d)

head

11.

Fill in the building blocks and essential code line we have learned.

<​!DOCTYPE html>

<​ (a)   >

<​ (b)   >

<​ (c)   >

<​/head >

<​ (d)   >

</body>

<_​ (e)   >

Choose from the below words
html
head
meta charset="utf-8" 
body
/html
12.

Which meta tag allows the webpage to scale to the width of the device the user is accessing it from?

a)

frame-width

b)

viewscape

c)

viewport

d)

portview

13.

Which is the proper way to write an h1 element

a)

<h1>Hello</h1>

b)

<h1>"Hello

c)

{h1}Hello{/h1}

d)

<h1>Hello<h1>

14.

What is the proper closing tag for the smallest default header size?

a)

</h1>

b)

</h6>

c)

<h1>

d)

<h6>

15.

Match the following entities

a)

<

1.

&lt;

b)

>

2.

&gt;

c)

&

3.

&amp;

d)

"

4.

&quot;

e)

©

5.

&copy;

16.

Select all of the following that are meta tags.

a)

description

b)

keywords

c)

body

d)

author

e)

charset

17.

In the code below, which word is CSS the value?

<h1 style="color:blue;">Hello</h1>

a)

h1

b)

style

c)

color

d)

blue

18.

What do child elements and parent elements refer to in HTML?

a)

The order in which elements appear in the code.

b)

Elements with a higher precedence in styling.

c)

Elements that have special attributes.

d)

Elements that are nested inside other elements.

19.

What property is used to change a font?

a)

font-family

b)

font

c)

font-group

d)

font-style

20.

Which property is used to change the size of the font of an element?

a)

font-size

b)

font-height

c)

font-family-size

d)

size

21.

Image is what type of element? Select ALL tha apply.

a)

empty

b)

container

c)

block

d)

inline

e)

void

22.

Paragraph is what type of element? Select ALL tha apply.

a)

empty

b)

container

c)

block

d)

inline

e)

void

23.

Which is the correct way to type a paragraph tag?

a)

paragraph

b)

par

c)

pg

d)

p

24.

Inside what element do anchor elements belong?

a)

title

b)

head

c)

h1

d)

body

25.

Which semantic element typically has a title name or logo and is commonly positioned at or near the top of a webpage?

a)

main

b)

article

c)

section

d)

header

26.

Which tag will create a line across the page of your website?

a)

lr

b)

line

c)

hr

d)

br

27.

Which of these elements is needed to make an ordered list? Select 2 that apply.

a)

  1. ol

b)

  • ul

c)

li

d)

il

e)

list

28.

By default, an unordered list item will automatically have what at the beginning?

a)

A lowercase letter

b)

A number

c)

A roman numeral

d)

A bullet

29.

Which of the following is NOT a position that can be used in text align?

a)

center

b)

left

c)

right

d)

top

30.

Select the correct syntax to align text to the center.

a)

<h2 style="text-align:center;">Hello</h2>

b)

<h2 style=text-align:center;>Hello</h2>

c)

<h2 style="align-text:center;">Hello</h2>

d)

<h2 style=align-text:center;>Hello</h2>

31.

The target="_blank" attribute opens the link in

a)

the same tab

b)

a new window

c)

a new tab

d)

the browser determines between a new tab or a new window

32.

Every anchor element should have a ______ attribute.

a)

src

b)

href

c)

meta

d)

name

33.

Every image element should have which 2 attributes?

a)

src

b)

href

c)

meta

d)

name

e)

alt

34.

The following is an example of what kind of link? Select 2 that apply.

<a href="puppy.html">Puppy Page</a>

a)

internal

b)

external

c)

relative

d)

meta

e)

absolute

35.

The following is an example of what kind of link? Select 2 that apply. <a href="https://www.youtube.com">YouTube</a>

a)

internal

b)

external

c)

asbolute

d)

meta

e)

relative

36.

What is the name of the folder that this image is stored in?

<img src="dogs/puppy.png" alt="cute dog">

a)

dogs

b)

puppy

c)

it is not in a folder

d)

cute dog

37.

What should the alt text hold?

a)

The author's name

b)

The source URL of the image

c)

The image's file size

d)

A brief description of the image

38.

If you see

<style>

body {color: blue}

</style>

what type of styling is being used?

a)

HTML

b)

Inline CSS

c)

Internal CSS

d)

External CSS

39.

In body {color:blue; }, what is color:blue; ?

a)

selector

b)

attribute

c)

declaration

d)

property

40.

In body {color:blue; }, what is body ?

a)

selector

b)

attribute

c)

declaration

d)

property

41.

Which of the following is correct code?

a)

<button onclick=alert('Hello World')> Click Me</button>

b)

<button onclick="alert('Hello World')">Click Me</button>

c)

<button onclick=alert(Hello World)>Click Me</button>

d)

<button onclick="alert(Hello World)">Click Me</button>

42.

Which HTML elements can put a video on the website? Select ALL that apply.

a)

video

b)

frame

c)

media

d)

film

e)

iframe

43.

Which of the following is proper code?

a)

<video> <source src="soda.mp4" type="video/mp4"> </video>

b)

<video> <source src:soda.mp4; type:video/mp4;> </video>

c)

<video> <src source="soda.mp4" type="video/mp4"> </video>

d)

<iframe> <source src="soda.mp4" type="video/mp4"> </iframe>

44.

What are the two tags required to make an image a link? Select ALL that apply.

a)

<a>

b)

<link>

c)

<img>

d)

<pic>

e)

<image>

45.

Inside which HTML tag do I put my <link> tag that links to a CSS file?

a)

<title>

b)

<head>

c)

<body>

d)

<h1>

46.

What are marquees used for?

a)

Displaying static text on the screen

b)

Showing moving text in different directions

c)

Highlighting images on a webpage

d)

Creating interactive animations

47.

What does the "direction" attribute determine?

a)

The way the marquee moves and where it stops (keeps moving, back and forth, across then stop)

b)

How fast the marquee moves

c)

The text inside the marquee

d)

Where the marquee starts from and goes to (left, up, down, right)

48.

Which of the following is proper code?

a)

h1 { font-family:impact; color:orange;

b)

h1 ( font-family:impact; color:orange; )

c)

h1 { font-family:impact; color:orange; }

d)

h1 { font family:impact; color:orange; }

49.

Which is proper code?

a)

<link type="stylesheet" rel="text/CSS" href="mystyles.css">

b)

<link rel="stylesheet" type="text/CSS" href="mystyles.css">

c)

<a rel:"stylesheet" type:"text/CSS" href:"mystyles.css">

d)

<a rel="stylesheet" type="text/CSS" href="mystyles.css">

50.

In which type of CSS is the "magic" word style used as part of a separate file name and referenced in the link tag?

a)

Inline CSS

b)

Internal CSS

c)

External CSS

d)

All of them.

51.

Which of the following text-shadow values will create a blurry shadow?

a)

text-shadow: 5px 10px gray;

b)

text-shadow: 5px 5px 10px gray;

c)

text-shadow: 10px 10px gray;

d)

text-shadow: 5px 5px gray;

52.

How do you round corners in HTML/CSS?

a)

corner-radius

b)

rounded-corner

c)

border-radius

d)

corner-round

53.

What property could be used to make the effect in the image?

a)

text shadow

b)

font shadow

c)

box shadow

d)

family shadow

54.

What can you use to make this effect?

a)

text shadow

b)

font shadow

c)

box shadow

d)

family shadow

55.

What do you put before a color code to show it is in hexadecimal?

a)

#

b)

.hex

c)

.

d)

@

56.

What do you put before a selector to show that you are calling a class in CSS?

a)

#

b)

.cl

c)

.

d)

@

57.

What would you type to create a class called marker?

a)

class:marker;

b)

.class=marker;

c)

class="marker"

d)

class-marker

58.

Which pseudo class would be used for an unvisited link?

a)

link

b)

visited

c)

hover

d)

active

59.

Which is the correct syntax to style a hover effect on a header element?

a)

h1hover

b)

hover:h1

c)

h1:hover

d)

hover-h1

60.

Which is a proper HTML comment?

a)

<-- Comment -->

b)

<!-- Comment -->

c)

/* Comment */

d)

// Comment //

61.

Which is a proper CSS comment?

a)

<!-- Comment -->

b)

*/ Comment /

c)

/* Comment */

d)

// Comment //

62.

What is the space between the element and the border called?

a)

padding

b)

margin

c)

border

d)

content

63.

If I wanted to add more blue space in the picture, what element would I use?

a)

padding

b)

margin

c)

border

d)

content

64.

What property is required to create a gradient?

a)

background-image

b)

background-gradient

c)

gradient

d)

gradient-image

65.

Which of the following is coded correctly?

a)

a::link

b)

a::visited

c)

a::first-letter

d)

a::after

66.

What element makes an "invisible" rectangle that starts a new line and takes up the full width of the container on your page you can style using CSS but has no other meaning?

a)
div
b)

span

c)

heading

d)

head

67.

In the picture, blue and brown were styled using what type of element? <________>

a)
span
b)

div

c)

heading

d)

a

68.

How can you make all buttons on a website look uniform using CSS?

a)

Use pseudo-selectors

b)

Use different class names for each button

c)

Use the same class name for each button

d)

Use JavaScript to style the buttons

69.

What is the proper code to style the list as shown in the image?

a)

list-style: disc;

b)

list-style: circle;

c)

style-list: disc;

d)

style-list: circle;

70.

What 2 elements can be used for icons?

a)

<icon>

b)

<i>

c)

<span>

d)

<sp>

71.

Select the 2 necessary items to have an icon work on your webpage.

a)

a div element in the body section

b)

an i element in the body section

c)

a link element in the head section

d)

a link element in the body section

e)

a meta element in the head section

72.

Which of the following are border-style options? Select all that apply.

a)

invisible

b)

dashed

c)

round

d)

solid

e)

outset

73.

Which of the following properties can you abbreviate in the border shortcut?

a)

border-color

b)

border-width

c)

border-thickness

d)

border-type

e)

border-style

74.

If two inline elements are placed one after another in code, how will they appear?

a)

Hidden until hovered with the mouse

b)

Stacked vertically with big gaps

c)

Side by side in the same line

d)

On separate lines across the page

75.

Which CSS position value is the default and keeps elements in normal document flow without offsetting by top, right, bottom, or left?

a)

relative

b)

static

c)

fixed

d)

absolute

76.

If you want a heading to stay visible at the same spot from the beginning and while the page scrolls, which position value should you use?

a)

static

b)

fixed

c)

absolute

d)

relative

77.

Which of the following is correct snytax for a media query?

a)

@media (max-width: 400px) { body { background-color:green; }

b)

.media (min-width: 540px) { body { background-color:green; }

c)

@media (min-width: 768px) { body ( background-color: blue;) }

d)

.media {max-width: 400px} { body { background-color:green; }

78.

How many columns are in the following example?

.container { background-color: navy; display: grid; grid-template-columns: 20px auto auto auto; }

a)

2

b)

3

c)

4

d)

5

79.

In CSS Flexbox, how are items laid out by default?

a)

Column-wise (up and down)

b)

Diagonally

c)

Row-wise (left to right)

d)

In a grid

80.

What is a limitation of using Flexbox for layouts?

a)

It cannot handle one-dimensional layouts

b)

It cannot handle two-dimensional layouts

c)

It cannot handle flexible layouts

d)

It cannot handle responsive designs

Similar Resources on Wayground

Ôn Science 6th

80 questions

Ôn Science 6th

quiz

Worksheet

•

5th Grade - University