Day 2: Text Formatting and Links in HTML

#html #css #javascript #beginners

Welcome back to Day 2 of your journey to mastering HTML and CSS! Today, we will dive deeper into HTML by exploring text formatting and links. By the end of this post, you'll be able to format text and create links to other web pages.

Text Formatting in HTML

HTML provides various tags to format text, making it more readable and visually appealing. Here are some essential text formatting tags:

Headings: Headings are used to define the titles and subtitles in your content. HTML offers six levels of headings, from <h1> to <h6>, with <h1> being the highest (or most important) level and <h6> the lowest.

   <h1>This is an H1 heading</h1>
   <h2>This is an H2 heading</h2>
   <h3>This is an H3 heading</h3>
   <h4>This is an H4 heading</h4>
   <h5>This is an H5 heading</h5>
   <h6>This is an H6 heading</h6>

2.Paragraphs: The <p> tag defines a paragraph.

   <p>This is a paragraph of text.</p>

3.Bold and Italic Text: Use the <strong> tag for bold text and the <em> tag for italic text.

   <p>This is a <strong>bold</strong> text.</p>
   <p>This is an <em>italic</em> text.</p>

4.Line Breaks: The <br> tag inserts a line break.

   <p>This is the first line.<br>This is the second line.</p>

5.Horizontal Rule: The <hr> tag inserts a horizontal line, which can be used to separate content.

   <p>This is some text.</p>
   <hr>
   <p>This is more text.</p>

Creating Links in HTML

Links are fundamental in HTML as they allow you to navigate from one page to another. The <a> (anchor) tag is used to create hyperlinks.

Basic Link: The href attribute specifies the URL of the page the link goes to.

   <a href="https://www.example.com">Visit Example</a>

2.Open Link in New Tab: Use the target="_blank" attribute to open the link in a new tab.

   <a href="https://www.example.com" target="_blank">Visit Example in a new tab</a>

3.Link to an Email Address: Use the mailto: scheme in the href attribute.

   <a href="mailto:your.email@example.com">Send Email</a>

4.Link to a Section on the Same Page: Use the id attribute to create a bookmark and link to it.

   <h2 id="section1">Section 1</h2>
   <a href="#section1">Go to Section 1</a>

Creating Your HTML Document with Text Formatting and Links

Let's create an HTML document incorporating the tags we've learned today:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Formatting and Links</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a <strong>sample</strong> paragraph with <em>italic</em> and <strong>bold</strong> text.</p>
    <p>Here is a link to <a href="https://www.example.com" target="_blank">Example</a>.</p>
    <p>Send me an <a href="mailto:your.email@example.com">email</a>.</p>
    <p>Go to <a href="#section1">Section 1</a>.</p>
    <hr>
    <h2 id="section1">Section 1</h2>
    <p>This is the first section of the page.</p>
    <p>This is the end of the document.</p>
</body>
</html>

Summary

In this blog post, we explored various text formatting tags and learned how to create links in HTML. Practice using these tags to format your content and create links to enhance navigation.

Series Index

Part	Title	Link
1	Day 1: Getting Started with HTML	Read Part 1
2	Day 2: Text Formatting and Links in HTML	Read Part 2
3	Day 3: Lists and Images in HTML	Read Part 3
4	Day 4: Creating Tables in HTML	Read Part 4
5	Day 5: Creating Forms in HTML	Read Part 5
6	Day 6: Introduction to Semantic HTML	Read Part 6
7	Day 7: Introduction to CSS	Read Part 7