0
0
Intro to Computingfundamentals~20 mins

HTML as the language of web pages in Intro to Computing - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepFlowTryChallengeDrawRecallReal
Challenge - 5 Problems
🎖️
HTML Mastery Badge
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate
2:00remaining
What is the role of the element in an HTML document?

Consider the structure of an HTML page. What is the main purpose of the <head> element?

Intro to Computing
<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
</head>
<body>
  <p>Hello World!</p>
</body>
</html>
AIt contains metadata and information like the page title and links to stylesheets.
BIt displays the main content visible to users on the page.
CIt defines the footer section of the page.
DIt is used to add interactive scripts that run after the page loads.
Attempts:
2 left
💡 Hint

Think about what information is needed by the browser but not shown directly on the page.

❓ trace
intermediate
2:00remaining
What text will be displayed by this HTML snippet?

Look at this HTML code. What text will appear on the web page when rendered?

Intro to Computing
<!DOCTYPE html>
<html>
<body>
  <h1>Welcome</h1>
  <p>This is a <strong>simple</strong> page.</p>
  <footer>Contact us</footer>
</body>
</html>
AWelcome<br>This is a simple page.<br>Contact us
BWelcome This is a simple page. Contact us
C
Welcome
This is a simple page.
Contact us
DOnly 'Welcome' will be shown
Attempts:
2 left
💡 Hint

Remember that HTML ignores line breaks in code and spaces separate text.

❓ identification
advanced
2:00remaining
Which HTML element is used to create a clickable link?

Identify the HTML tag that creates a hyperlink to another web page.

A<a>
B<link>
C<href>
D<url>
Attempts:
2 left
💡 Hint

Think about the tag that wraps text to make it clickable.

❓ Comparison
advanced
2:00remaining
Which option correctly links an external CSS file in HTML?

Choose the correct HTML code to include an external CSS stylesheet named styles.css.

A<script src="styles.css"></script>
B<style src="styles.css"></style>
C<css link="styles.css">
D<link rel="stylesheet" href="styles.css">
Attempts:
2 left
💡 Hint

Remember the tag used for linking stylesheets and the attribute names.

🚀 Application
expert
3:00remaining
What is the output of this HTML and CSS snippet in a browser?

Given the following HTML and CSS, what color will the paragraph text appear as?

Intro to Computing
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    p { color: blue; }
    .highlight { color: red !important; }
  </style>
</head>
<body>
  <p class="highlight" style="color: green;">Text color test</p>
</body>
</html>
ABlue
BGreen
CRed
DBlack (default)
Attempts:
2 left
💡 Hint

Consider CSS specificity and the effect of !important.