Are you ready to take your first step into the exciting world of web development? Learning HTML is a fantastic starting point, and in this guide, we'll walk you through the fundamentals of HTML tags and provide clear explanations for each one. By the end of this article, you'll have a solid foundation in creating structured web content. Let's dive in!
Introduction to HTML:
HTML (Hypertext Markup Language) is the building block of the web. It uses a set of tags to structure content and tell browsers how to display it. Tags are enclosed in angle brackets and come in pairs: an opening tag and a closing tag.
Use Notepad or TextEdit to learn HTML.
Steps to start :
1. Open Notepad or TextEdit
Open the screen and search for Notepad.
2. Write HTML code
Write or copy (Ctrl+C) paste (Ctrl+V) the code into Notepad.
3. Save HTML file
Using File > Save as or Ctrl+S you can save your file.
Nane the file as "index.html" (.htlm is the file extension) and give All files or html for save as type.
4. View HTML page on browser
Open the saved HTML file and double click on it or right click and choose open with.
Basic HTML Tags and Their Explanations:
1. <!DOCTYPE> : This represent the document type, and helps browser to display web pages correctly.
2. <html> : The root element that wraps the entire HTML document.
2. <head> : Contains metadata about the document, such as the title that appears in the browser tab.
3. <title> : Sets the title of the webpage, which is displayed in the browser tab.
4. <body> : Contains the visible content of the webpage.
5. <h1> to <h6> : Headings of different levels, with `<h1>` being the highest and `<h6>` the lowest.
6. <p> : Defines a paragraph.
7. <a> : Creates a hyperlink. The `href` attribute specifies the URL.
8. <img> : Embeds an image. The `src` attribute specifies the image file.
9. <ul> : Defines an unordered (bulleted) list.
10. <ol> : Defines an ordered (numbered) list.
11. <li> : Represents a list item within <ul> or <ol> .
12. <div> : A generic container to group and style elements.
13. <span> : A generic inline container often used for styling small portions of text.
14. <strong> : Indicates strong importance, typically displayed as bold text.
15. <em>: Indicates emphasized text, typically displayed in italics.
16. <br> : Inserts a line break.
17. <hr> : Creates a thematic break or horizontal rule.
Putting It All Together:
Let's create a simple HTML example using some of these tags:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage!</h1>
<h2>Welcome to My Webpage!</h2>
<h3>Welcome to My Webpage!</h3>
<h4>Welcome to My Webpage!</h4>
<h5>Welcome to My Webpage!</h5>
<h6>Welcome to My Webpage!</h6>
<p>This is a paragraph</p>
<a href="https://www.example.com"> This is a link</a>
<img src="image.jpg" alt="An example image">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</body>
</html>
Try this yourself
Conclusion:
Learning HTML tags is your gateway to creating structured and engaging web content. By understanding the purpose of each tag, you'll be able to build the foundation of web development. As you explore more advanced topics, keep referring back to these basic tags to enhance your skills. Happy coding!
Remember, practice makes perfect, so don't hesitate to experiment and create your own web pages using the HTML tags you've learned. With time and dedication, you'll become a proficient web developer.
){kind=link}
0 Comments