Learn HTML Basics to Advance in 7 Days: Day One
Introduction to HTML
Welcome to Day One of learning HTML. HTML stands for HyperText Markup Language. It is the standard language for creating webpages. With HTML, you can create your own website.
HTML describes the structure of a webpage. It uses a series of elements to enclose or wrap different parts of the content to make it appear or act in a certain way.
Basic HTML Tags
HTML tags are the building blocks of HTML. They are used to create elements. Let's start with some basic tags:
- <html></html> - The root element. It represents the whole document.
- <head></head> - Contains meta-information about the document.
- <title></title> - Sets the title of the document.
- <body></body> - Contains the content of the document.
- <h1></h1> to <h6></h6> - Defines HTML headings.
- <p></p> - Defines a paragraph.
- <a></a> - Defines a hyperlink.
Creating a Simple Webpage
Now, let's create a simple webpage using these basic tags. Follow these steps:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first webpage.</p>
<a href="https://www.example.com">Visit Example</a>
</body>
</html>
Copy this code into a text editor. Save the file with a .html extension. Open it in a web browser to see your first webpage.
Understanding the DOCTYPE Declaration
The <!DOCTYPE html> declaration defines the document type. It tells the browser that this document is an HTML5 document. Always include this declaration in your HTML documents.
HTML Attributes
HTML elements can have attributes. Attributes provide additional information about elements. They are always included in the opening tag and usually come in name/value pairs like this: name="value".
For example, the <a> tag above has an href attribute. This attribute specifies the URL of the page the link goes to.
HTML Elements and Nesting
HTML elements can be nested. This means you can put elements inside other elements. For example:
<body>
<h1>Welcome to My Website</h1>
<p>This is a <strong>bold</strong> text inside a paragraph.</p>
</body>
In this example, the <strong> element is nested inside the <p> element. This makes the word "bold" bold.
HTML Comments
Comments are used to explain the code and are not displayed in the browser. You can add comments in HTML with the <!-- comment --> tag. For example:
<!-- This is a comment -->
<p>This is a paragraph.</p>
Conclusion
Today, you have learned the basics of HTML. We covered what HTML is, some basic tags, how to create a simple webpage, and the importance of the DOCTYPE declaration. We also discussed HTML attributes, nesting elements, and adding comments. These are the foundations of HTML, and you will build on this knowledge in the coming days.
FAQ
What is HTML?
HTML stands for HyperText Markup Language. It is used to create and design webpages.
What is the purpose of the DOCTYPE declaration?
The DOCTYPE declaration defines the document type and version of HTML. It ensures the browser correctly displays the content.
Can HTML elements be nested?
Yes, HTML elements can be nested within each other. This allows for more complex webpage structures.
What are HTML attributes?
Attributes provide additional information about HTML elements. They are always specified in the opening tag.
How do you add comments in HTML?
Comments in HTML are added using the <!-- comment --> tag. They are not displayed in the browser.