Task 1: Creating Headings
Create a simple HTML document with a title "My Web Page" and headings from <h1> to <h6> each containing the
text "Heading 1" through "Heading 6".
Task 2: Formatting Text
Write an HTML snippet that includes a paragraph with bold, italic, and underlined text. The paragraph should say:
"This is bold, this is italic, and this is underlined."
Task 3: Adding Anchors and Hyperlinks
Create a hyperlink that links to "https://www.example.com" with the text "Visit Example".
Task 4: Utilizing Various Types of Lists
Create an ordered list with three items: "First item", "Second item", and "Third item". Below it, create an unordered
list with three items: "Item A", "Item B", and "Item C".
Task 5: Constructing Tables
Create a table with 2 rows and 3 columns. The first row should contain the headers "Name", "Age", and "City". The
second row should contain the data "Alice", "30", and "New York".
Task 6: Applying Classes and IDs
Create a paragraph with the text "This is a paragraph with a class." and apply a class named "myClass". Then,
create another paragraph with the text "This is a paragraph with an ID." and apply an ID named "myID".
Task 7: Incorporating Data Attributes
Create a <div> element with a data attribute data-role set to "admin". Inside the <div>, add the text "Admin
Content".
Task 8: Embedding Images
Embed an image with the source "image.jpg" and an alternative text "Example Image".
Task 9: Implementing Input Control Elements and Forms
Create a simple form with one text input, one password input, and a submit button. The form should have the action
"submit_form.php".
Task 10: Using Div Elements for Structuring and Styling Content
Create a <div> element with a class "container". Inside the <div>, add another <div> with the class "header"
containing the text "Header". Below it, add another <div> with the class "content" containing the text "Content goes
here".
Task 11: Designing Navigation Bars
Create a navigation bar using an unordered list. The navigation bar should have three links: "Home", "About", and
"Contact".
Task 12: Integrating Iframes
Embed an iframe that displays the page "https://www.example.com" with a width of 600 pixels and a height of 400
pixels.
Task 13: Specifying Content Languages
Create an HTML document that specifies the language as English.
Task 14: Implementing HTML5 Cache for Offline Access
Write a simple HTML document that includes the manifest attribute in the <html> tag pointing to a file named
"cache.appcache".
Task 15: Utilizing HTML Event Attributes
Create a button that displays an alert saying "Button clicked!" when clicked.
HTML Basics Coding Test Answers
Task 1: Creating Headings
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Task 2: Formatting Text
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formatting Text</title>
</head>
<body>
<p>This is <b>bold</b>, this is <i>italic</i>, and this is <u>underlined</u>.</p>
</body>
</html>
Task 3: Adding Anchors and Hyperlinks
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anchors and Hyperlinks</title>
</head>
<body>
<a href="https://www.example.com">Visit Example</a>
</body>
</html>
Task 4: Utilizing Various Types of Lists
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lists</title>
</head>
<body>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</body>
</html>
Task 5: Constructing Tables
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tables</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
<td>New York</td>
</tr>
</table>
</body>
</html>
Task 6: Applying Classes and IDs
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Classes and IDs</title>
</head>
<body>
<p class="myClass">This is a paragraph with a class.</p>
<p id="myID">This is a paragraph with an ID.</p>
</body>
</html>
Task 7: Incorporating Data Attributes
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Attributes</title>
</head>
<body>
<div data-role="admin">Admin Content</div>
</body>
</html>
Task 8: Embedding Images
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Images</title>
</head>
<body>
<img src="image.jpg" alt="Example Image">
</body>
</html>
Task 9: Implementing Input Control Elements and Forms
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forms</title>
</head>
<body>
<form action="submit_form.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Task 10: Using Div Elements for Structuring and Styling Content
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Elements</title>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="content">Content goes here</div>
</div>
</body>
</html>
Task 11: Designing Navigation Bars
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bars</title>
</head>
<body>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</body>
</html>
Task 12: Integrating Iframes
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframes</title>
</head>
<body>
<iframe src="https://www.example.com" width="600" height="400"></iframe>
</body>
</html>
Task 13: Specifying Content Languages
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Language Specification</title>
</head>
<body>
</body>
</html>
Task 14: Implementing HTML5 Cache for Offline Access
html
Copy code
<!DOCTYPE html>
<html lang="en" manifest="cache.appcache">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Cache</title>
</head>
<body>
</body>
</html>
Task 15: Utilizing HTML Event Attributes
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Attributes</title>
<script>
function showAlert() {
alert("Button clicked!");
}
</script>
</head>
<body>
<button onclick="showAlert()">Click me</button>
</body>
</html>
