--- UNDER CONSTRUCTION!!!!!! --- hash academy launches 2/31/2025 ---
Lesson 2: HTML Elements & Tags
Welcome to Class 3 on HTML Elements and Tags! 🌟 By now, you’ve probably seen a bunch of tags floating around the web, but today we’ll break it all down and make HTML come alive! Imagine HTML tags as magic codes that shape and organize the content of a webpage. Without them, websites would be a big jumble of text with no order. So, grab your coding wand, and let’s dive into the world of HTML!
Text Formatting Tags: Make Your Words Shine
Want to make your text bold, italic, or underline it? HTML has tags for that too!
Bold: Use bold text to make a word or phrase stand out and grab attention.
Italics: Use italics to emphasize a word or phrase, like when you want to show something is important or different.
Underline: Underline text to highlight it, making sure it gets noticed.
Strikethrough: Cross out text to show that something has been removed or changed.
Superscript: Use superscript for text that needs to appear smaller and above the line, like exponents in math.
Subscript: Use subscript for text that appears smaller and below the line, like in chemical formulas.
Text Alignment: Where Should Your Words Go?
Aligning your text makes your webpage look neat and organized. While the <center> tag used to be a common way to center text, it’s now deprecated (no longer recommended). Instead, we use CSS to align text. With CSS, you have more control over how things are positioned, making your website look polished and professional. You can align text to the left, right, or center, depending on how you want it to appear on the page.
Tables: Organizing Data Like a Spreadsheet
Want to show data in neat rows and columns? You can do that with HTML tables! Tables are used to display information like schedules, stats, or comparisons. They allow you to arrange content into rows and columns, just like a spreadsheet. With tables, you can clearly organize and display data for your visitors to easily understand.
Forms: Gathering Data from Users
Forms are like little interactive sections where users can type in their information or answer questions. Forms can include fields like text boxes, checkboxes, and submit buttons. Forms are great for collecting information, like when users sign up for newsletters or submit feedback. They allow people to interact with your webpage and provide data that can be used in many ways.
Conclusion: You’re an HTML Pro Now!
And there you have it! You’ve learned all about HTML elements and tags. Each tag has its special role, whether it’s creating headings, displaying images, linking to other pages, or organizing information into neat lists and tables. By now, you should feel confident in your ability to structure a webpage and make it look amazing. So what are you waiting for? It’s time to create your own beautiful pages and start coding like a pro! 🚀
Homework Challenge: Try creating your own webpage with headings, paragraphs, a list, and an image. Share what you make, and you’ll see how quickly you can start building your dream websites!
Happy coding, and see you next class! 💻✨
Module 3: Activity
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>
What are HTML Tags?
HTML tags are the building blocks of a webpage. They are special codes that tell the browser how to display text, images, links, and even how to organize everything on the screen. Think of them as instructions or commands that help the browser understand how your page should look and behave. Every time you want to create something like a title, paragraph, or a list, you’ll need to use HTML tags to do the job. They’re like ingredients in a recipe—each one serves its purpose to create the perfect website dish!
Opening and Closing Tags: The Dynamic Duo
HTML tags work in pairs. There’s an opening tag and a closing tag, just like a door that opens and closes. For example, if you want to create a big heading for your page, you would use the opening tag and the closing tag. Notice that the closing tag has a slash (/) before it, which tells the browser where to stop doing its magic. So, if you wanted to make a heading, the opening tag says, “Start this heading,” and the closing tag says, “End the heading here!”
Just like a book has a beginning and an end, HTML tags have an opening tag and a closing tag.
Opening tag: <h1>
Closing tag: </h1>
The opening tag tells the browser what you want to do, and the closing tag tells it where to stop doing that thing. Notice that the closing tag has a / before the tag name. Simple, right?
Self-Closing Tags: No Need for a Closing Partner
Not every tag needs a closing partner. Some tags are self-closing, which means they do their job in one simple swoop! For example, the image tag adds an image to your webpage, and it doesn't need a closing tag. Similarly, the line break tag creates a line break, just like pressing “Enter” on your keyboard. These tags are quick and efficient, taking care of business with no fuss.
For example:
<img>: Inserts an image.
<br>: Adds a line break (like hitting "Enter" on your keyboard).
Headings (<h1> to <h6>)
Headings are used to define the titles or main sections of your page. The <h1> tag is the biggest heading, and <h6> is the smallest. They help organize content into sections.
Example:
<h1>This is the main heading!</h1>
<h2>This is a subheading.</h2>
<h3>This is a smaller heading.</h3>
Paragraphs (<p>)
A paragraph tag is used to group sentences into a block of text. It’s like organizing thoughts into a paragraph in a book.
Example:
<p>This is a paragraph of text. HTML is fun!</p>
Lists: Organizing Information Like a Pro
HTML has two types of lists to help you organize your information clearly: unordered and ordered lists.
Unordered List (Bulleted List)
An unordered list displays items with bullet points.
Example:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
Ordered List (Numbered List)
An ordered list displays items with numbers.
Example:
<ol>
<li>Step 1: Preheat the oven</li>
<li>Step 2: Mix the ingredients</li>
<li>Step 3: Bake for 30 minutes</li>
</ol>
Links (<a>)
Want to take your viewers to another webpage? Use the <a> tag! It lets you create clickable links.
Example:
<a href="https://www.google.com">Go to Google!</a>
href is the attribute that tells the link where to go. Without it, the link doesn't go anywhere.
Images (<img>)
The <img> tag lets you add pictures to your webpage. But unlike other tags, it doesn't have a closing tag!
Example:
<img src="puppy.jpg" alt="A cute puppy">
src is the source of the image (the file name or URL).
alt provides alternative text for accessibility or if the image doesn’t load.
Common HTML Tags: Building Blocks for Your Webpage
Let's get to know some common HTML tags that will make you a webpage wizard. These tags are your tools to organize content, add images, make links, and more!
Headings (<h1> to <h6>): Think of headings as the titles of chapters in a book. The <h1> tag is the biggest and most important heading, while <h6> is the smallest. Headings help divide your page into sections, making it easier to read.
Paragraphs (<p>): A paragraph is a block of text. Use the <p> tag to group sentences into a neat and organized paragraph. Without it, your text would be all over the place, just a big pile of words.
Links (<a>): Want to take people to another page or website? Use the <a> tag! This tag creates clickable hyperlinks, like the magic portals of the web. When users click on the link, they’ll be transported to a new page or website.
Images (<img>): Want to add some visuals to your page? Use the <img> tag. This tag is perfect for displaying images, from pictures of your pets to funny memes. It’s a great way to make your webpage more engaging and visually interesting.
Unordered Lists (<ul>): This is a list where the order doesn’t matter, and each item is marked with a bullet point. It’s perfect for listing things like your favorite foods or colors.
Ordered Lists (<ol>): When you need a list where the order does matter (like a step-by-step guide), use an ordered list. This list automatically numbers the items for you, which is great for showing sequences.
