Embedded Files
🎯 Introduction
🎯 Introduction
In this article, we will delve into the fundamentals of HTML by examining some basic elements and their usage. We will explore headings, horizontal lines, paragraphs, and hyperlinks, providing code examples and explanations to help you grasp these concepts effectively.
🎯 Hyperlink Example
🎯 Hyperlink Example
Hyperlinks play a crucial role in web development as they allow users to navigate between different web pages or external resources. The syntax for creating a hyperlink is as follows:
Syntax
Syntax
<a href="http://www.url.com">Text</a>
Here's an example code snippet:
Example Program
Example Program
<html>
  <body>
    <p>HTML Link Example - www.thiyagaraaj.com</p>
    <a href="http://www.thiyagaraaj.com">
      This is a link for little drops @ thiyagaraaj.com
    </a>
  </body>
</html>
Sample Output
Sample Output
HTML Link Example - www.thiyagaraaj.com
This is a link for little drops @ thiyagaraaj.com
Explanation
Explanation
In the code snippet above, we first define a paragraph using the <p> tag to provide context for the hyperlink. Then, we create the actual hyperlink using the <a> tag and specify the URL within the href attribute. The text that will be displayed as the link is placed between the opening and closing <a> tags.
🎯 Paragraph Example
🎯 Paragraph Example
Paragraphs are used to structure and organize textual content within an HTML document. To create a paragraph, we use the <p> tag. Here's the syntax:
Syntax
Syntax
<p>text</p>
Let's take a look at an example:
Example Program
Example Program
<html>
  <body>
    <p>Paragraph Example - www.thiyagaraaj.com</p>
    <p>
      This is a paragraph. This is a paragraph. This is a paragraph. This is a
      paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
      This is a paragraph. This is a paragraph. This is a paragraph. This is a
      paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
      This is a paragraph. This is a paragraph. This is a paragraph.
    </p>
  </body>
</html>
Sample Output
Sample Output
Paragraph Example - www.thiyagaraaj.com
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
Explanation
Explanation
In the provided code snippet, we have two paragraphs. The first paragraph serves as a heading, indicating the purpose of the example. The second paragraph showcases an extended block of text. Both paragraphs are enclosed within <p> tags to define their boundaries.
🎯 Horizontal Line Example
🎯 Horizontal Line Example
Horizontal lines, often used to separate content or sections, can be easily added to an HTML document. The <hr> tag is used for this purpose. Here's the syntax:
Syntax
Syntax
<hr />
Let's examine an example that demonstrates various aspects of horizontal lines:
Example Program
Example Program
<html>
  <body>
    <p>HTML Horizontal Line Example - www.thiyagaraaj.com</p>
    <hr />
    <p>Normal Horizontal Line</p>
    <hr size="10" />
    <p>You can set size for Horizontal Line</p>
    <hr size="10" color="green" />
    <p>You can set Color for Horizontal Line</p>
  </body>
</html>
Explanation
Explanation
In the given code snippet, we first introduce a paragraph that serves as a heading for the example. Then, we add a horizontal line using <hr />, resulting in a simple line across the page. Following that, we demonstrate how to modify the size and color of the horizontal line by utilizing the size and color attributes respectively.
Sample Output
Sample Output
🎯 HTML Heading Example
🎯 HTML Heading Example
Headings are vital for structuring and organizing content hierarchically. HTML provides six levels of headings, from <h1> to <h6>. Here's the syntax for creating headings:
Syntax
Syntax
<h1></h1>
<h2></h1>
<h3></h1>
<h4></h1>
<h5></h1>
<h6></h1>
Let's explore an example showcasing the usage of different heading levels:
Example Program
Example Program
<html>
  <body>
    <h1>Heading 1 Example</h1>
    <p>Paragraph Example - www.thiyagaraaj.com</p>
    <h2>Heading 2 Example</h2>
    <p>Paragraph Example - www.thiyagaraaj.com</p>
    <h3>Heading 3 Example</h3>
    <p>Paragraph Example - www.thiyagaraaj.com</p>
    <h4>Heading 4 Example</h4>
    <p>Paragraph Example - www.thiyagaraaj.com</p>
    <h5>Heading 5 Example</h5>
    <p>Paragraph Example - www.thiyagaraaj.com</p>
    <h6>Heading 6 Example</h6>
    <p>Paragraph Example - www.thiyagaraaj.com</p>
  </body>
</html>
Explanation
Explanation
In the above code snippet, we demonstrate how to use different heading levels. Each heading is marked by the respective <hN> tag, where N ranges from 1 to 6. The accompanying paragraphs provide a brief description of each heading's purpose.
Sample Output
Sample Output
🎯 Summary and Key Points
🎯 Summary and Key Points
In this article, we explored the basics of HTML elements such as headings, horizontal lines, paragraphs, and hyperlinks. We discussed their syntax, provided code examples, and explained their significance in web development. Remember that these elements serve as the building blocks of web pages and understanding their usage is crucial for creating well-structured and visually appealing websites.
Hyperlinks allow users to navigate between web pages and external resources.
Paragraphs are used to structure textual content within an HTML document.
Horizontal lines help separate content or sections on a web page.
Headings provide hierarchical organization to content, ranging from <h1> to <h6>.
Page updated
Report abuse