Essential HTML Concepts and Practical Examples

Posted on Aug 22, 2025 in Naval Systems and Technology Engineering

Web Development Practical Solutions

This document provides solutions and examples for common web development practical questions, covering fundamental HTML concepts and their applications.

1. Creating a Basic Web Page Message

<!DOCTYPE html>
<html>
<head>
    <title>WPD Sample</title>
</head>
<body>
    Web Page Designing using HTML
</body>
</html>

2. Setting Background and Text Color for Headings

<!DOCTYPE html>
<html>
<head>
    <title>Color Demo</title>
</head>
<body style="background-color: lightblue;">
    <h1 style="color: darkred;">Heading with Color</h1>
</body>
</html>

3. HTML Code for Specific Text Formatting Output

<!DOCTYPE html>
<html>
<head>
    <title>MSBTE Output</title>
</head>
<body>
    <center><b><font color="gray" size="4">MSBTE</font></b></center>
    <center><font color="red" size="7"><b>MSBTE</b></font></center>
    <hr color="orangered" size="1">
    <font color="black"><b><font color="orangered" size="5">Hello MSBTE</font></b></font>
</body>
</html>

4. Paragraph Formatting with HTML Tags

<!DOCTYPE html>
<html>
<head><title>Paragraph Formatting</title></head>
<body>
    <p><b>Bold Text</b></p>
    <p><i>Italic Text</i></p>
    <p><u>Underlined Text</u></p>
    <center>This is centered text</center>
    <pre>This      is      preformatted    text</pre><hr>
</body>
</html>

5. Attributes of the <hr> Tag

  • color: Sets the color of the line.
  • size: Defines the thickness.
  • width: Sets the width.
  • align: Aligns the horizontal rule (left, center, right).
  • noshade: Removes shading (solid line).

6. Blockquote vs. Address Tags: Key Differences

  • <blockquote>: Used to quote large blocks of text from another source.
  • <address>: Displays contact information, usually in italic style.

7. Understanding the <address> Tag

The <address> tag displays author or contact details. It is usually rendered in italics and often includes information like name, email, or phone number.

8. HTML Text Formatting Techniques

HTML text formatting enhances readability and presentation using tags such as <b>, <i>, <u>, and <mark>.

9. Inserting the Copyright Symbol

&copy; or &#169;

Example:

<p>&copy; 2025 YourName</p>

10. <b> vs. <strong> in HTML

  • <b>: Just makes text bold (visual styling).
  • <strong>: Provides semantic meaning; emphasizes importance and is bold by default.

11. Applying the CSS Border Property

The CSS border property is used to apply borders to HTML elements such as paragraphs, divisions (<div>), and tables, enhancing their design and layout.

12. Setting Border Width

Example:

<p style="border: 2px solid black;">Text with border</p>

13. Applying Color to Borders

Yes, border color can be applied using CSS:

<p style="border: 2px solid blue;">Blue Border</p>

14. Displaying Special Characters in HTML

<!DOCTYPE html>
<html>
<head><title>Special Characters</title></head>
<body>
    &lt; means less than<br>
    &gt; means greater than<br>
    &amp; means ampersand<br>
    &quot; means quotation mark<br>
    &copy; 2025
</body>
</html>

15. Creating Hyperlinks in HTML

<!DOCTYPE html>
<html>
<head><title>Hyperlinks</title></head>
<body>
    <a href="https://www.google.com">Visit Google</a><br>
    <a href="about.html">About Us</a>
</body>
</html>

16. Ordered and Unordered Lists

<!DOCTYPE html>
<html>
<head><title>HTML Lists</title></head>
<body>
    <h2>Ordered List</h2>
    <ol>
        <li>Item One</li>
        <li>Item Two</li>
    </ol>

    <h2>Unordered List</h2>
    <ul>
        <li>Item A</li>
        <li>Item B</li>
    </ul>
</body>
</html>

17. HTML Code for Specific List Output

(This example demonstrates HTML code to produce a specific list output.)

<!DOCTYPE html>
<html>
<head><title>HTML Lists</title></head>
<body>
    <h2>Welcome To HTML List</h2>

    <h3>Ordered List</h3>
    <ol type="1">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>

    <h3>Unordered List</h3>
    <ul type="disc">
        <li>Python</li>
        <li>PHP</li>
        <li>MySQL</li>
    </ul>
</body>
</html>

18. Nested Lists: Ordered within Unordered

<ul><li>Data Structures<ol><li>Array</li><li>Linked List</li></ol></li></ul>

19. Nested Lists: Unordered within Unordered

<ul><li>Languages<ul><li>Java</li><li>Python</li></ul></li></ul>

20. Creating a Basic HTML Table

<!DOCTYPE html>
<html>
<head><title>Table</title></head>
<body>
<table border="1"><tr><th>Roll</th><th>Name</th><th>Marks</th></tr>
<tr><td>01</td><td>John</td><td>85</td></tr>
<tr><td>02</td><td>Neha</td><td>90</td></tr>
</table>
</body>
</html>