Scribd
Upload
14 views

HTML Test

Uploaded by

Yatin Singhal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

HTML Test

Uploaded by

Yatin Singhal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

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>

You might also like