.jpg)
Introduction:
Welcome to our comprehensive HTML practical guide! In this blog post, we will
dive into the fundamental building blocks of HTML, focusing on structure tags,
formatting tags, list tags, and image with image maps. Understanding these
tags is essential for creating well-structured, visually appealing web pages.
Whether you're a beginner starting your web development journey or an
experienced developer looking to refresh your HTML skills, this practical
guide will provide you with hands-on examples to help you master these
important aspects of HTML.
Practical 1:-
HTML code:-
<!DOCTYPE html> <html> <head> <title>Text Formatting Example</title> </head> <body> <hr> 21 Text Formatting Tags:- <hr> <h1>Text Formatting Example</h1> <h2>Text Formatting Example</h2> <h3>Text Formatting Example</h3> <h4>Text Formatting Example</h4> <h5>Text Formatting Example</h5> <h6>Text Formatting Example</h6> <p>This is a paragraph of <b>bold</b> text.</p> <p>This is a paragraph of <i>italic</i> text.</p> <p>This is a paragraph of <u>underlined</u> text.</p> <p>This is a paragraph of <strong>strong</strong> text.</p> <p>This is a paragraph of <em>emphasized</em> text.</p> <p>This is a paragraph of <sup>superscript</sup> text.</p> <p>This is a paragraph of <sub>subscript</sub> text.</p> <p>This is a paragraph of <mark>highlighted</mark> text.</p> <p>This is a paragraph of <del>deleted</del> text.</p> <p>This is a paragraph of <ins>inserted</ins> text.</p> <p>This is a paragraph of <code>code</code> text.</p> <p>This is a paragraph of <pre>preformatted</pre> text.</p> <p>This is a paragraph of <small>small</small> text.</p> <p>This is a paragraph of <big>big</big> text.</p> <p>This is a paragraph of <font color="red">red</font> text.</p> <hr> List Tags: <hr> <h2>Unordered List</h2> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <h2>Ordered List</h2> <ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol> <h2>Definition List</h2> <dl> <dt>Term 1</dt> <dd>Definition 1</dd> <dt>Term 2</dt> <dd>Definition 2</dd> <dt>Term 3</dt> <dd>Definition 3</dd> </dl> <hr> Image and Image Mapping: <hr> <img src="image.jpg" alt="Example Image" usemap="#mymap"> <map name="mymap"> <area shape="rect" coords="217,44,393,135" href="http://www.here.com/"> <area shape="circle" coords="146,154,55" href="http://www.there.com/"> <area shape="poly" coords="0,75,42,7,62,0,105,70,51,107,62,81,75" href="http://www.everywhere.com/"> </map> </body> </html>
Output:-
 |
| Output |
Conclusion:
By mastering structure tags, formatting tags, list tags, and image with image
maps, you'll have a solid foundation in HTML. These practical examples have
equipped you with the necessary knowledge to create well-structured, visually
appealing web pages. Remember, HTML is the backbone of the web, and
understanding these tags will greatly enhance your ability to craft engaging
online experiences. Practice and experiment with these tags to unleash your
creativity and take your web development skills to new heights. Happy coding!
.jpg)
