HTML Introduction Tutorial
What is HTML?
HTML, which stands for HyperText Markup Language, is the standard language used to create and design web pages. HTML provides the structure and content of a web page, defining elements like headings, paragraphs, links, images, and more.
In this tutorial, you’ll learn the fundamental HTML elements and how to use them to create a basic web page.
Getting Started
To create an HTML document, all you need is a plain text editor (like Notepad on Windows, TextEdit on macOS, or VSCode) and a web browser (such as Chrome, Firefox, or Edge). Here are the basic steps:
Create a New File: Open your text editor and create a new file.
Set Up the Document: Start with an HTML5 document structure by adding the following code:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
</body>
</html>
This code sets up the basic structure of an HTML document.
- Adding Content: You can add various HTML elements between the
<body>tags to display content on your web page.
Basic HTML Elements
Headings
HTML offers six levels of headings, from <h1> (the highest level) to <h6> (the lowest level):
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>
Paragraphs
Use the <p> element for paragraphs:
<p>This is a paragraph of text.</p>
Links
Create links using the <a> element:
<a href="https://www.example.com">Visit Example.com</a>
Images
Embed images using the <img> element:
<img decoding="async" src="image.jpg" alt="Description of the image">
Lists
You can create both ordered (numbered) and unordered (bulleted) lists:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Images
Embed images using the <img> element:
<img decoding="async" src="image.jpg" alt="Description of the image">
Saving and Viewing Your Page
Save the file with an
.htmlextension (e.g.,index.html).Open the HTML file in your web browser to view your web page.
Conclusion
Congratulations! You’ve created your first HTML web page. This tutorial covered the basics of HTML elements and how to structure a simple webpage. Continue learning and exploring HTML to create more complex and interactive web pages.
This is just the beginning of your web development journey. HTML is the foundation of web development, and there’s so much more to explore and learn. Good luck with your coding adventures!