HTML Formatting 🎯

Welcome to our in-depth guide on HTML Formatting! 🎉

HTML, or Hyper Text Markup Language, is the backbone of web development, allowing us to structure and format content on the web. In this lesson, we'll dive deep into the world of HTML formatting, making it easy for both beginners and intermediates to understand.

Getting Started 📝

Before we begin, let's make sure you have a basic text editor installed on your computer. Some popular choices include Notepad (Windows) and Sublime Text (multi-platform).

Elements and Tags 💡

In HTML, everything is defined using elements, which are enclosed within tags. A tag consists of an opening tag (e.g., <p>) and a closing tag (e.g., </p>).

Quick Quiz

Question 1 of 1

What is the difference between an opening tag and a closing tag in HTML?

Basic HTML Tags 📝

Headings 💡

Headings in HTML are used to structure the content. They range from <h1> (most important) to <h6> (least important).

html

<!DOCTYPE html>
<html>
<head>
    <title>My First Heading Example</title>
</head>
<body>
    <h1>Welcome to CodeYourCraft!</h1>
    <h2>This is a subheading</h2>
    <!-- ... more headings here ... -->
</body>
</html>

Paragraphs 💡

The <p> tag is used to create paragraphs.

html

<!DOCTYPE html>
<html>
<head>
    <title>My First Paragraph Example</title>
</head>
<body>
    <p>This is a paragraph.</p>
    <p>Another paragraph.</p>
</body>
</html>

Links 💡

The <a> tag is used to create hyperlinks.

html

<!DOCTYPE html>
<html>
<head>
    <title>My First Link Example</title>
</head>
<body>
    <a href="https://codeyourcraft.com">Visit CodeYourCraft</a>
</body>
</html>

Images 💡

The <img> tag is used to embed images.

html

<!DOCTYPE html>
<html>
<head>
    <title>My First Image Example</title>
</head>
<body>
    <img src="image.jpg" alt="Description of the image">
</body>
</html>

Quick Quiz

Question 1 of 1

What is the purpose of the `alt` attribute in the `<img>` tag?

Practice Exercise 💡

Create a simple HTML file with the following elements:

A heading (<h1>)
A paragraph (<p>)
An image (<img>)
A hyperlink (<a>)

Save your file as exercise.html and open it in a web browser to see your work.

Advanced HTML Tags 💡

In the next sections, we'll explore more advanced HTML tags such as lists, tables, and forms. Stay tuned! 🎉

This lesson covers the basics of HTML formatting, providing a strong foundation for beginners and a refresher for intermediates. With practice, you'll be well on your way to mastering HTML.

Happy coding! 🎓 🚀