--- UNDER CONSTRUCTION!!!!!! --- hash academy launches 2/31/2025 ---
Course Intro : Introduction to HTML: What is HTML?
Objective (15-30 minutes) :
By the end of this lesson, you will understand what HTML is, why it's important in web development, and the basic structure of an HTML document.
1. What is HTML?
Definition: Hypertext Markup Language (HTML)
HTML stands for Hypertext Markup Language. It is the standard language used to create and structure content on the web. HTML is a markup language, which means it uses special tags to define different parts of a webpage.
Hypertext: Refers to the ability to create links that connect one webpage to another. HTML allows us to create links (<a> tags) that enable users to navigate between web pages.
Markup: Refers to the tags that structure and describe the content of a webpage. For example, headings, paragraphs, images, and links are all defined by HTML tags.
Even though HTML is not a programming language, it plays a key role in web development. HTML is used in every webpage you see on the internet.
A simple HTML page includes several key elements: the document type, the HTML tags, the <head> section, and the <body> section. Here's an example of a basic HTML document:
A simple HTML page includes several key elements: the document type, the HTML tags, the <head> section, and the <body> section.
Let's break this down:
<!DOCTYPE html>
This declaration defines the document type and specifies that the page is written in HTML5. It's required at the very beginning of every HTML document.
<html lang="en">
The <html> tag wraps all the content on the page and tells the browser that this is an HTML document.
The lang="en" attribute specifies that the language of the page is English.
<head>
The <head> element contains metadata about the page, such as the character set, viewport settings, and the title of the page (which appears in the browser's tab).
The <meta> tags provide additional information:
<meta charset="UTF-8"> ensures that the document uses the UTF-8 character encoding, which supports a wide range of characters.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> makes the page responsive, meaning it adjusts automatically to fit different screen sizes (important for mobile devices).
<meta http-equiv="X-UA-Compatible" content="ie=edge"> ensures that the page works properly in older versions of Internet Explorer.
The <title> tag defines the text that appears on the browser tab or title bar.
<body>
The <body> tag contains all the visible content on the page.
In this example, inside the <body>, we have:
<h1>: A top-level heading. The <h1> tag is typically used for the main title or heading on the page.
<p>: A paragraph tag, which is used to display text content. The text inside the <p> tag will appear as a block of text.
💻✨Activity: Writing Your First HTML Page
Now it's time to put your knowledge into practice. Follow these steps:
Open a text editor (such as Notepad, VS Code, or Sublime Text).
Copy and paste the following code into your text editor:
Save the file with the name index.html.
Open the saved file in a web browser (Chrome, Firefox, Safari, etc.).
You should see a webpage with a heading ("Welcome to My Website!") and a paragraph of text ("This is a simple web page created with HTML.").
Quick Recap
2. Importance of HTML in Web Development
HTML is the backbone of the web, and its role is crucial for several reasons:
Foundation for All Web Pages: Every website and web application is built using HTML. While other technologies like CSS and JavaScript enhance the look and functionality of websites, HTML is responsible for defining the structure of content on the page.
Universal Compatibility: HTML is supported by all web browsers (Chrome, Firefox, Safari, etc.), meaning it works across different platforms like desktops, laptops, tablets, and smartphones.
SEO (Search Engine Optimization): Search engines like Google use HTML to understand and rank the content of a page. Properly structured HTML helps improve the visibility of your website in search engine results.
Accessibility: HTML ensures that web pages are accessible to all users, including those with disabilities. Proper use of HTML tags (like <alt> for images) ensures that screen readers can interpret content correctly.
A simple HTML page includes several key elements: the document type, the HTML tags, the <head> section, and the <body> section. Here's an example of a basic HTML document:
3. Structure of a Basic HTML Document
Now that you know what HTML is and why it's the backbone of the internet, it's time to dive into how to create a basic HTML document. Don't worry – it's like building a house, and HTML is your foundation. Think of it as your personal blueprint for a website. Once you master it, you'll be able to create pages that work on any device, from your smartphone to your laptop!
So, let’s break down the structure of a basic HTML document in a way that even your grandma can understand (if she were a tech wizard, of course). 🔮✨
The Basic Structure: Your Web Document’s DNA
Before you start coding, let’s take a quick peek at the basic structure. The skeleton of an HTML document looks something like this:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Class!</title>
</head>
<body>
<h1>Hello, Class!</h1>
<p>Welcome to Hash Academy</p>
</body>
</html>
This is a DOCTYPE declaration. It's like a "heads-up" to the browser, telling it, “Hey! I’m an HTML5 document!” It’s the first line of your document and is critical for the browser to render your page properly. It's the first step in making sure everything works like magic. 🧙‍♀️✨
3. The <html> Tag: Your Web Page's Container
Next up:
<!DOCTYPE html>
Cool, right? Now let’s break it down into bite-sized, digestible chunks:
2. The DOCTYPE Declaration: Setting the Stage
At the very top of your document, you’ll see this:
The <html> tag is the container for your entire web page. It holds everything: your head, body, and all the cool stuff in between. Think of it as the big box where all the action happens. The closing </html> tag marks the end of the box.
4. The <head> Tag: Information About the Page
Inside the <html> tag, we have the <head> tag:
The <head> tag contains meta-information about your page. This is like the backstage pass for your page, where you can add things like:
The title of your page (<title>): This is the title that shows up in the browser tab, like "My First Web Page" above.
Links to stylesheets or scripts: If you want to add extra styling or interactivity later, this is where you’d link your CSS and JavaScript files. But for now, we’re keeping it simple!
5. The <body> Tag: Where the Magic Happens
This is where the real party happens. 🎉 Everything you want people to see on the page goes here. The content within the <body> tag is what shows up on the page when someone visits your website.
<html>
<head>
<title>My First Web Page</title>
</head>
Here’s what each part means:
<h1>: This is a header tag. It’s the most important heading (think of it as your page’s title). It stands for Heading 1, and it’s the largest and most prominent.
<p>: This is a paragraph tag, used to display blocks of text. It’s how we write text in neat, readable chunks.
6. The Closing Tags: Wrapping it Up
Every opening tag must have a matching closing tag. This is like a couple – when you open a door (<tag>), you need to close it (</tag>). So, let’s revisit the HTML structure:
<html> opens the document, and </html> closes it.
<head> opens the header section, and </head> closes it.
<body> opens the content section, and </body> closes it.
<body>
<h1>Hello, World!</h1>
<p>Welcome to my first HTML page.</p>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to Hash Academy</h1>
<p>This is a simple web page created with HTML. You will learn a lot in this course!</p>
</body>
</html>
HTML stands for Hypertext Markup Language and is used to structure content on the web.
HTML is the foundation of every webpage, providing the structure for text, images, and links.
A basic HTML document includes:
<!DOCTYPE html>: Declares the document type (HTML5).
<html>: The root element that wraps all content.
<head>: Contains metadata like the title and character encoding.
<body>: Contains all visible content, such as headings and paragraphs.
By mastering HTML, you'll be able to build the basic structure of any web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>This is a simple web page created with HTML.</p>
</body>
</html>
