In this chapter, we will see some examples of HTML which we may have had before.
HTML Basic Examples:-
HTML Document:- Paragraph Heading Hyperlink These together make a document of HTML all of these together are called HTML Document.
<h1>This is My h1 Heading.</h1>
<p>This is My paragraph</p>
Output:-
HTML Paragraphs:-
<p>This is First paragraph.</p>
<p>This is Second paragraph.</p>
Output:-
HTML Headings:-
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
Output:-
HTML Links:-
<h2>HTML Links Example</h2>
<a href="https://learnhtmlcoding.com">This is Link</a>
HTML Buttons:-
<h2>HTML Buttons Example</h2>
<button>Click Button</button>
Output:-
HTML lists:-
<h2>HTML Unordered List</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>HTML Ordered List</h2>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Output:-
HTML Styles Example:-
HTML background-color:-
<body style="background-color: blue;">
<h1>This is Heading 1</h1>
<p>Lorem ipsum dolor sit amet.</p>
</body>Output:-
HTML text color:-
<h1 style="color: red;">This is Heading 1</h1>
<p style="color: blue;">Lorem ipsum dolor sit amet.</p>
Output:-
HTML text size:-
<h1 style="font-size: 40px;">This is Heading 1</h1>
<p style="font-size: 20px;">Lorem ipsum dolor sit amet.</p>
Output:-
HTML text font:-
<h1 style="font-family: verdana;">This is Heading 1</h1>
<p style="font-family: courier;">Lorem ipsum dolor sit amet.</p>
Output:-
HTML text alignment:-
<h1 style="text-align: center;">This is Heading 1</h1>
<p style="text-align: center;">Lorem ipsum dolor sit amet.</p>
Output:-
HTML Text Formatting:-
<h2>HTML b Tag:</h2>
<p>Lorem ipsum dolor <b>sit amet</b> consectetur.</p>
<h2>HTML i Tag:</h2>
<p>Lorem <i>ipsum dolor sit amet</i> consectetur.</p>
<h2>HTML em Tag:</h2>
<p>Lorem <em>ipsum dolor sit amet,</em> consectetur.</p>
<h2>HTML strong Tag:</h2>
<p>Lorem <strong>ipsum dolor sit amet,</strong> consectetur.</p>
<h2>HTML small Tag:</h2>
<p>Lorem <small>ipsum dolor sit amet,</small>consectetur.</p>
<h2>HTML del Tag:</h2>
<p>Lorem<del>ipsum dolor sit amet,</del> consectetur.</p>
<h2>HTML mark Tag:</h2>
<p>Lorem <mark>ipsum dolor</mark> sit amet, consectetur.</p>
<h2>HTML ins Tag:</h2>
<p>Lorem <ins>ipsum dolor sit</ins> amet, consectetur.</p>
<h2>HTML sub Tag:</h2>
<p>Lorem <sub>ipsum dolor</sub> sit amet, consectetur.</p>
<h2>HTML sup Tag:</h2>
<p>Lorem <sup>ipsum dolor</sup> sit amet, consectetur.</p>
By putting this code in your code editor, you can see its result.