Post Details

HTML5-practice

HTML5 code to create a definition list of three HTML5 tags with their description.

<!DOCTYPE html>

<html>

<head>

<title>Definition List Example</title>

</head>

<body>

<dl>

<dt><h1></dt>

<dd>Defines the largest heading.</dd>

<dt><p></dt>

<dd>Defines a paragraph.</dd>

<dt><a></dt>

<dd>Defines a hyperlink.</dd>

</dl>

</body>

</html>

an HTML page with a background color, a heading, a bulleted list, and a hyperlink to another webpage.

<!DOCTYPE html>

<html>

<head>

<title>Sample Page</title>

<style>

body {

background-color: lightblue;

}

</style>

</head>

<body>

<h1>My Favorite Fruits</h1>

<ul>

<li>Apple</li>

<li>Banana</li>

<li>Cherry</li>

</ul>

<p>Visit <a href=”https://www.example.com” target=”_blank”>Example Website</a> for more info.</p>

</body>

</html>

Create HTML code for a page titled “Sports News” with a heading, a horizontal line, a paragraph, and a bulleted list of 3 sports.

<!DOCTYPE html>

<html>

<head>

<title>Sports News</title>

</head>

<body>

<h1>Sports News</h1>

<hr>

<p>Latest updates from the world of sports.</p>

<ul>

<li>Football</li>

<li>Cricket</li>

<li>Tennis</li>

</ul>

</body>

</html>

Describe the process of setting up an HTML5 document with DOCTYPE, HTML, HEAD, TITLE, and BODY tags. Give example.

Explanation:

The <!DOCTYPE html> declaration defines the document as HTML5.
The <html> tag is the root element.
The <head> tag contains meta information, scripts, and the title.
The <title> tag sets the title shown in the browser tab.
The <body> tag contains all visible page content.

Example:

<!DOCTYPE html>

<html>

<head>

<title>My First HTML5 Page</title>

</head>

<body>

<h1>Welcome to HTML5</h1>

<p>This is a simple HTML5 document.</p>

</body>

</html>

Write HTML code to insert a horizontal line and a special character.

HTML code:

<hr> <!– Horizontal line –>

Write any three differences between <ol> and <ul> tags.

Feature	<ol>	<ul>
Meaning	Ordered list (numbered list)	Unordered list (bulleted list)
Display Style	Numbers (1, 2, 3…) by default	Bullets by default
Use Case	When sequence/order matters	When order does not matter

Write HTML code for a page titled “My Recipes” with one heading, one paragraph, and an ordered list of 3 dishes.

<!DOCTYPE html>

<html>

<head>

<title>My Recipes</title>

</head>

<body>

<h1>My Favorite Recipes</h1>

<p>Here are some dishes I love to cook:</p>

<ol>

<li>chicken Curry</li>

<li>Fish Curry</li>

<li>Fish Fry</li>

</ol>

</body>

</html>

Explain formatting text in HTML5 using <b>, <i>, <sup>, <sub>, <pre>, and <code> tags with examples.

<b>: Makes text bold (visual emphasis).
<i>: Italicizes text (visual emphasis).
<sup>: Superscript text (e.g., exponents).
<sub>: Subscript text (e.g., chemical formulas).
<pre>: Preformatted text (preserves spaces and line breaks).
<code>: Displays code snippets in monospace font.

Example:

<b>Bold Text</b>

<i>Italic Text</i>

H<sub>2</sub>O

E = mc<sup>2</sup>

<pre>

This is

preformatted

text.

</pre>

<code>printf(“Hello World”);</code>

Write HTML code for a page with light yellow background, a heading, numbered list of 3 cities, and a hyperlink to an email.

<!DOCTYPE html>

<html>

<head>

<title>Contact</title>

<style>

body {

background-color: #ffffe0; /* light yellow */

}

</style>

</head>

<body>

<h1>Contact Us</h1>

<ol>

<li>New York</li>

<li>Los Angeles</li>

<li>Chicago</li>

</ol>

<p>Email us at <a href=”mailto:info@example.com”>info@example.com</a></p>

</body>

</html>

Give HTML code to create an email hyperlink.

<a href=”mailto:someone@example.com”>Send Email</a>

Explain with example the use of headings, bold, italic, superscript, and subscript in HTML5.

Explanation:

Headings (<h1> to <h6>) are used to define headings and subheadings in the content. <h1> is the highest level (largest), and <h6> is the lowest level (smallest).
Bold text (<b>) is used to make text bold without implying importance.
Italic text (<i>) is used to italicize text for emphasis or style.
Superscript (<sup>) is used to display text slightly above the normal line, commonly for exponents or footnotes.
Subscript (<sub>) is used to display text slightly below the normal line, commonly for chemical formulas or mathematical indices.

Example HTML:

<!DOCTYPE html>

<html>

<head>

<title>Text Formatting Example</title>

</head>

<body>

<h1>This is a Heading 1</h1>

<p>This is a <b>bold</b> word, and this is an <i>italic</i> word.</p>

<p>Water is H<sub>2</sub>O.</p>

<p>E = mc<sup>2</sup></p>

</body>

</html>

Write HTML5 code to set a background image/color, insert a horizontal rule, and create a hyperlink to a PDF file.

<!DOCTYPE html>

<html>

<head>

<title>Background and PDF Link</title>

<style>

body {

background-image: url(‘background.jpg’);

background-size: cover;

}

</style>

</head>

<body>

<hr>

<p>Download the <a href=”document.pdf” target=”_blank”>PDF file</a>.</p>

</body>

</html>

Explain with example the use of the <br>, <hr>, <mark>, <small>, and <strong> tags in HTML5.

Explanation:

<br>: Inserts a line break.
<hr>: Creates a horizontal line (used to separate sections).
<mark>: Highlights text with a yellow background by default.
<small>: Displays text in smaller size than normal text.
<strong>: Makes text bold and indicates strong importance.

<!DOCTYPE html5>
<html>
<head>
<title>HTML5 Formatting Tags</title>
</head>
<body>
<p>This is the first line.<br>This is after a line break.</p>
<hr>
<p>This is a <mark>highlighted</mark> word.</p>
<p><small>This text is smaller.</small></p>
<p>This is a <strong>very important</strong> message.</p>
</body>
</html>

Give HTML code to insert a line break and display a registered trademark symbol.

<!DOCTYPE html>
<html>
<head>
<title>Special Character Example</title>
</head>
<body>
<p>Welcome to TechWorld®<br>We provide quality content.</p>
</body>
</html>

Explain what HTML is and describe the basic structure of an HTML5 document with an example.

What is HTML?

HTML (HyperText Markup Language) is the standard language used to create web pages.
It consists of tags that define the structure and content of a webpage.
HTML allows adding headings, paragraphs, lists, links, images, and other content to a page.

Basic Structure of an HTML5 Document:

<!DOCTYPE html> – Declares the document type as HTML5.
<html> – Root element that contains the entire HTML content.
<head> – Contains meta information, title, and links to styles/scripts.
<title> – Sets the page title shown on the browser tab.
<body> – Contains all visible content like headings, paragraphs, images, etc.

Example HTML5 Document:

<!DOCTYPE html>
<html>
<head>
<title>My First HTML5 Page</title>
</head>
<body>
<h1>Welcome to HTML5</h1>
<p>This is a simple HTML5 document structure.</p>
</body>
</html>

Write HTML code to create a bulleted list, a numbered list, and a definition list with examples.

<!DOCTYPE html5>
<html>
<head>
<title>HTML Lists Example</title>
</head>
<body>
<h2>Bulleted List (Unordered List)</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>

<h2>Numbered List (Ordered List)</h2>
<ol>
<li>Wake up</li>
<li>Brush Teeth</li>
<li>Have Breakfast</li>
</ol>

<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JS</dt>
<dd>JavaScript</dd>
</dl>
</body>
</html>

Examine the HTML code below and answer the following:

<!DOCTYPE html5>
<html>
<head>
<title>Special Characters Example</title>
</head>
<body>
<h2>Special Characters</h2>
<p>Company Name © 2025</p> <!– © –>
<p>Registered Product ®</p> <!– ® –>
<p>Trademarked Brand ™</p> <!– ™ –>
<hr> <!– Horizontal line –>
<p>End of section</p>
</body>
</html>

Questions:

Identify the special characters used in this page and explain their purpose.
Which tag is used to insert a horizontal line?
What will appear as the page title in the browser tab?
Explain the difference between the <h2> and <p> tags used in this code.

Special Characters Used and Purpose:
- © → Displays the copyright symbol (©)
- ® → Displays the registered trademark symbol (®)
- ™ → Displays the trademark symbol (™)
Tag Used for Horizontal Line:
- <hr> is used to insert a horizontal line in the webpage.
Page Title in Browser Tab:
- The title will be “Special Characters Example”, taken from the <title> tag in the <head> section.
Difference Between <h2> and <p> Tags:
- <h2> defines a heading: larger, bold, and used for section titles.
- <p> defines a paragraph: normal text for regular content.

Write HTML code to create a page with:

A heading.
A bulleted list of 3 favorite books.
A hyperlink to an external website for more information.

<!DOCTYPE html5>
<html>
<head>
<title>My Favorite Books</title>
</head>
<body>
<h1>My Favorite Books</h1>
<ul>
<li>Harry Potter</li>
<li>The Alchemist</li>
<li>To Kill a Mockingbird</li>
</ul>
<p>For more book reviews, visit <a href=”https://www.goodreads.com” target=”_blank”>Goodreads</a>.</p>
</body>
</html>

Write HTML code to create a webpage that displays multiple special characters (©, ®, ™, €) and separates each section with a horizontal line.

<!DOCTYPE html5>
<html>
<head>
<title>Special Characters Page</title>
</head>
<body>
<h1>Special Characters</h1>

<p>Registered Product: ®</p>
<hr>

<p>Trademark: ™</p>
<hr>

<p>Euro Symbol: €</p>
</body>
</html>