Practice Program of HTML - 1
1. Introduction to HTML
<!DOCTYPE html>
<html>
<head>
<title>Introduction to HTML</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>HTML stands for HyperText Markup Language. It is used to create web pages.</p>
</body>
</html>
2. Basic Structure of HTML
<!DOCTYPE html>
<html>
<head>
<title>Basic Structure</title>
</head>
<body>
<header>
<h1>Website Header</h1>
</header>
<main>
<p>This is the main content area.</p>
</main>
<footer>
<p>Footer Section</p>
</footer>
</body>
</html>
3. Program Using HTML in Notepad
<!DOCTYPE html>
<html>
<head>
<title>HTML in Notepad</title>
</head>
<body>
<h1>Creating HTML in Notepad</h1>
<p>You can write HTML in Notepad, save it with the extension <code>.html</code>, and open it in a browser.</p>
</body>
</html>
4. What is an Element?
<!DOCTYPE html>
<html>
<head>
<title>HTML Element Example</title>
</head>
<body>
<h1>HTML Elements</h1>
<p>An HTML element consists of a start tag, content, and an end tag.</p>
<p><strong>Example:</strong></p>
<p><p>This is an HTML element</p></p>
</body>
</html>
5. HTML Attributes
<!DOCTYPE html>
<html>
<head>
<title>HTML Attributes</title>
</head>
<body>
<h1 style="color: blue;">HTML Attributes</h1>
<p title="Hover over me!">This paragraph has a title attribute.</p>
<img src="example.jpg" alt="Example Image" width="200">
</body>
</html>
6. Body Tag Example
<!DOCTYPE html>
<html>
<head>
<title>Body Tag Example</title>
</head>
<body>
<h1>This content is inside the body tag</h1>
<p>The body tag contains all the visible content on a webpage.</p>
</body>
</html>
7. Heading Tag Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Tags</title>
</head>
<body>
<h1>Main Heading (h1)</h1>
<h2>Sub Heading (h2)</h2>
<h3>Sub-sub Heading (h3)</h3>
</body>
</html>
8. Paragraph Tag Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Tag</title>
</head>
<body>
<p>This is a paragraph. Paragraphs are defined using the <code><p></code> tag.</p>
<p style="color: green;">This paragraph has a green font color.</p>
</body>
</html>
9. Style Attribute Example
<!DOCTYPE html>
<html>
<head>
<title>Style Attribute</title>
</head>
<body>
<p style="color: red; font-size: 20px;">This is a styled paragraph.</p>
<h1 style="text-align: center; font-family: Arial;">Styled Heading</h1>
</body>
</html>
10. Combining All
<!DOCTYPE html>
<html>
<head>
<title>HTML Practice</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">HTML Practice Page</h1>
<p title="HTML Introduction" style="font-size: 18px;">This page demonstrates HTML basics.</p>
<h2>HTML Elements</h2>
<p>An example of an HTML element is shown below:</p>
<code><p>This is a paragraph</p></code>
<h2>Image with Attributes</h2>
<img src="example.jpg" alt="Sample Image" width="300">
<h2>Styled Content</h2>
<p style="color: green;">This paragraph has a green color.</p>
<footer>
<p>© 2025 Web Practice</p>
</footer>
</body>
</html>
Comments
Post a Comment