Scribd
Upload
6 views

HTML Test

Uploaded by

Yatin Singhal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

HTML Test

Uploaded by

Yatin Singhal
Copyright
© © All Rights Reserved
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