--- UNDER CONSTRUCTION!!!!!! --- hash academy launches 2/31/2025 ---
Lesson 1: Mastering Basic HTML Structure! 🎉
If you've ever wondered how websites are built, you're about to discover the magic behind the scenes. In this engaging, beginner-friendly course, we’re going to break down the structure of HTML (the language that powers websites) and show you how to create your own simple webpage. By the end, you’ll have the knowledge to build the foundation for any website. Let's dive in and make this learning experience as fun as it is educational!
Module 3: Your Second Simple Web Page!
Now that you understand the basic structure, it’s time to create something cool! Let’s start with the essentials. We'll use three simple HTML tags: <h1>, <p>, and <a>. The <h1> tag is for headings — think of it as the big bold title of your page. It’s like putting a sign on your door that says, “Welcome!”
Next, we have the <p> tag, which is used for paragraphs of text. It’s perfect for writing out your page’s content. Whether it’s an introduction or an explanation, the <p> tag helps organize your writing in a clean and readable way.
Finally, the <a> tag is for creating links to other web pages. These links let visitors navigate to other parts of your site or to external websites. It’s like creating a path from one room to another, or from your page to the rest of the internet!
Let’s put it all together into a simple webpage:
This small piece of code creates a webpage with a title, a heading, a paragraph of text, and a clickable link. The <meta charset="UTF-8"> tag ensures that the text on the page is readable, and the <title> tag sets what will appear in the browser tab.
Module 2: Airdrop Review!
Submit your answers on-chain to earn Airdrops and Prizes
1. What does the <!DOCTYPE html> declaration do?
A) It creates the layout of the page.
B) It tells the browser that the document is in HTML5.
C) It adds a background color to the page.
2. Which tag is used to create a heading on a webpage?
A) <h1>
B) <p>
C) <a>
3. What is the purpose of the <title> tag?
A) It creates the main heading.
B) It adds a link to another webpage.
C) It sets the name of the webpage in the browser tab.
4. What does the <body> section do in an HTML document?
A) It contains the metadata and invisible content.
B) It holds all the visible content on the webpage.
C) It adds external links to the page.
5. Which tag is used to create a hyperlink?
A) <p>
B) <a>
C) <img>
Module 1a: HTML Document Structure - The Basics
Think of an HTML document like a house. It has a foundation, walls, and a roof that hold everything together. The first thing you need to know is the declaration at the top of every HTML document: <!DOCTYPE html>. This line is like telling your browser, "Hey, I’m an HTML5 document, so treat me accordingly." Without it, your page might look strange, as your browser could misinterpret the content. So, while it’s simple, it's crucial!
Next up, we have the <html> tag, which is the root of your webpage. Everything in the document sits inside this tag, much like how all the rooms in a house are inside its walls. Inside the <html> tag, we’ll find the <head> and <body> sections. The <head> section is like the backstage area of a show — it contains all the important metadata that you don’t see on the page itself but helps the browser understand the page better. This includes the page's title, the character encoding, and links to external files (like stylesheets). You won't see any content here, but it's vital for smooth performance.
The <body> section, however, is where the magic happens. This is the visible part of the page, the part your visitors interact with. Think of it like the rooms of the house that your guests walk through, where all your content—like headings, text, and images—will live.
<!DOCTYPE html> Declaration:
This is the very first line of your HTML document. It tells your browser, “Hey, this is HTML5, so handle it accordingly!” Think of it like the address on a letter — it's crucial, but not super exciting. 😆<html> Tag:
Everything on your webpage will live inside this tag. It's like the outer walls of your webpage “house.”<head> Section:
The head section doesn’t show up on the webpage. It’s like the secret, behind-the-scenes stuff — the page title, links to styles, and other useful information for browsers and search engines. It's like the plumbing and wiring that powers your page, but it’s invisible to visitors.<body> Section:
This is where the magic happens! All the visible content—text, images, videos, links—goes here. It’s the living room, kitchen, and bedroom of your webpage. 🛋️🖥️
Module 1b Let’s Dig Deeper: The Secret Sauce of HTML
1.2.1 <!DOCTYPE html> Declaration
Why do we need it?
The <!DOCTYPE html> declaration is like telling your browser, "I’m speaking HTML5, the latest version!" Without it, your browser might get confused, and your page may look weird.Syntax:
1.2.2 The Opening and Closing <html> Tags
Why do we need it?
The <html> tag is like the big house for all your content. Without it, your browser wouldn’t know where your HTML begins or ends.
1.2.3 The <head> Section
Why do we need it?
The <head> section holds the secret ingredients—metadata, page title, links to external files (like CSS), and other behind-the-scenes essentials. It’s like the engine room of a car—necessary, but invisible to the driver (or in this case, the website visitor).Common Elements in the <head>:
<meta charset="UTF-8"> — Tells the browser how to read the text on your page.
<title> — This is what appears in your browser tab. It’s the webpage’s nameplate.
<link> — Connects your page to external resources like a CSS file for styling.
1.2.4 The <body> Section
Why do we need it?
The <body> is where all the fun happens! It’s where the visible content of your webpage lives, and it’s what your visitors interact with. Text, images, videos, and links all go inside this section. It’s the heart of your webpage. ❤️
