Welcome to Day 01 of our 10-day HTML Learning Series! 🎉
Today, we're diving into the basics of HTML (HyperText Markup Language), the backbone of every website. Whether you're a complete beginner or just brushing up on your skills, this series will help you build a solid foundation in HTML. Let's get started!
What is HTML?
- HTML stands for Hyper Text Markup Language
- Hypertext is text which contains links to other texts.
- Markup Lang. it’s a way to give instructions to a computer about how content should be organized and displayed.
- HTML is the standard markup language for creating Web pages
- HTML describes the structure of a Web page
- It was created by Tim Berners-Lee in 1993
- HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
The Basic Structure of an HTML Document
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
Let's break it down:
<!DOCTYPE html>: This declaration defines the document type and version of HTML. For
modern web pages, we use <!DOCTYPE html> for HTML5.
<html>: The opening tag that tells the browser that everything inside is an HTML
document.
<head>: This section contains meta-information about the HTML document, such as
the title, character set, and links to CSS or JavaScript files.
<title>: This tag defines the title of the web page, which appears on the
browser's title bar or tab.
<body>: The main content of your web page goes here, including text, images,
links, and more.
<h1>: This is a heading tag, used for main titles or important sections. There
are six levels of headings, from <h1> (most important) to
<h6> (least important).
<p>: This tag defines a paragraph of text.
A Simple Example
Let’s create a basic HTML page together!
Step 1: Create a New File
- Open your text editor (Notepad, VS Code, etc.).
- Save the file with a
.htmlextension, for example,index.html.
Step 2: Add HTML Code
Copy and paste the following code into your file:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>Explanation of the Code
- Title: The text inside the
<title>tag appears on the browser tab. - Heading: The
<h1>tag displays a large heading, perfect for titles. - Paragraph: The
<p>tag contains regular text content, making it easy to add paragraphs to your web page.
HTML Elements
Nested Elements
HTML elements can be nested, which means that elements can contain other element inside them, or nested. All HTML documents consist of nested HTML elements.
The following example contains four
HTML elements:
<html>, <body>, <h1>, and <p>
Excersie:
Conclusion
That’s it for Day 01! 🎉 You've just created your first HTML page and learned about the basic structure of an HTML document. Over the next 9 days, we'll dive deeper into HTML elements, attributes, and how to create more complex web pages.
Stay tuned for Day 02, where we’ll explore HTML tags and attributes in detail!
Happy coding! 💻
