Full Stack Camp

📚 Week 1 Day 5: Final HTML Lesson
 Semantic HTML, Meta Tags, Accessibility, Best Practices
━━━━━━━━━━━━━━━━━━
🌟 Why This Lesson? 
By now, you know how to structure pages with: 
➤ Headings 
➤ Paragraphs 
➤ Forms, Tables, Divs, Media Now, let’s focus on writing cleaner, more organized, and more professional HTML code using: 
- Semantic HTML 
- Meta tags 
- Accessibility (A11y) basics 
- Best practices
━━━━━━━━━━━━━━━━━━━━
✅ 1️⃣ What Is Semantic HTML? 
Semantic = Meaningful. 
Semantic HTML uses tags that describe their purpose. Instead of just using <div> everywhere, we now use: 
- <header> → Top of the page: logo, menu 
- <nav> → Navigation links 
- <main> → Main content 
- <section> → A specific group of content 
- <article> → Independent content like blog posts 
- <aside> → Sidebar content 
- <footer> → Bottom section: contact, copyright 
🎯 Why Use It? 
- Improves SEO (Google loves it!) 
- Improves accessibility for screen readers 
- Makes your code easier to read 
━━━━━━━━━━━━━━━━━━━
✅ 2️⃣ Real-World Example Layout 

<html> 
<head> 
       <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
       <title>Betelhem's Blog</title> 
</head> 
<body> 
        <header> 
                <h1>Betelhem’s Blog</h1> 
                <nav> 
                     <a href="#">Home</a> 
                     <a href="#">About</a> 
                     <a href="#">Contact</a> 
                 </nav> 
        </header> 
       <main> 
               <article> 
                      <h2>My First Blog Post</h2>
                     <p>Today, I learned Semantic HTML!</p> 
              </article> 
              <aside>
                   <h3>Quick Links</h3> 
                   <ul> 
                         <li><a href="#">HTML Tips</a></li>
                         <li><a href="#">CSS Basics</a></li>  
                  </ul> 
           </aside> 
      </main> 
      <footer> 
               <p>&copy; 2025 Betelhem. All rights reserved.</p> 
      </footer> 
</body>
</html>

━━━━━━━━━━━━━━━━━━━
✅ 3️⃣ What Are Meta Tags?
Meta tags go inside the <head> to give the browser information about your page. 
Essential meta tags: 
- <meta charset="UTF-8"> → Supports Amharic, Tigrinya, all languages 
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> → Makes page responsive 
- <meta name="description" content="Learn web development step by step.">
━━━━━━━━━━━━━━━━━━━
✅ 4️⃣ Accessibility Basics (A11y)
➤ alt attribute on images: <img src="injera.jpg" alt="Traditional Ethiopian Injera Plate"> 
➤ Use <label> for form inputs: <label for="email">Email:</label> <input type="email" id="email"> 
➤ Don’t rely only on color for important information 
━━━━━━━━━━━━━━━━━━━
✅ 5️⃣ HTML Entities Special symbols written as codes: 
- &lt; = < 
- &gt; = > 
- &copy; = © 
- &amp; = & 
━━━━━━━━━━━━━━━━━━
✅ 6️⃣ HTML Comments 
Write notes for yourself or other developers: 
<!-- This is a comment. It doesn’t show on the page. --> 
━━━━━━━━━━━━━━━━━━
✅ 7️⃣ Best Practices Review 
➺Use semantic tags instead of too many <div>s 
➺Indent your code properly 
➺ Always write alt text for images 
➺ Keep your file names clear: ➤ about.html, contact.html  
━━━━━━━━━━━━━━━━━━

#Week1 #Day5 #Html #SemanticHtml #lesson

94 viewsedited 20:34

Full Stack Camp

Assignment
Meta tags
https://youtu.be/bi5bfH_gVWE?si=n6Nq2Ss3urG8Cwzf
Buttons
https://youtu.be/_2wARy-oevQ?si=bGS_brnY7O1A9d4o

#Week1 #Day5 #Html #SemanticHtml #resources

YouTube

Learn HTML meta tags in 3 minutes 🏷️

HTML meta tags tutorial example explained

#HTML #meta #tags

98 viewsedited 20:37

Full Stack Camp

More challenges comingg before proceeding to Css. are you ready??

94 views20:42

Full Stack Camp

This is an official documentation on html by MDN Web Docs. It is detailed and have tons of examples.
https://developer.mozilla.org/en-US/docs/Web/HTML

MDN Web Docs

HTML: HyperText Markup Language | MDN

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior…

👍1

93 views06:41

Full Stack Camp

✅ Steps to Follow When Coding with HTML

1️⃣ List the Common Sections First
Before opening your editor, think about what most pages usually have:

Header: Title, logo, menu

Navigation (Nav): Links to different parts

Main Content: Text, images, tables, forms

Footer: © 2025, contact info, terms and conditions

👉 Writing this down helps you organize your thoughts.

---

2️⃣ Make a Simple Structure Sketch

Take a paper or digital note

Draw rough boxes showing where things will go:
➤ Top = Header
➤ Middle = Main Content
➤ Bottom = Footer

💡 This helps you see the layout before coding.

---

3️⃣ Sort and Prepare Your Content
Decide what text, images, tables, forms, or links you'll include:

Which headings?

Which paragraphs?

Will there be a form or table?

Where will images go?

📌 This keeps things clear instead of just guessing while coding.

---

4️⃣ Start Writing Your HTML Code

Open VS Code, TrebEdit, or any text editor

Build your page using correct HTML structure:
➤ Write semantic tags like <header>, <main>, <footer>
➤ Add content step by step

---

5️⃣ Check and Debug

Open your .html file in a browser

Make sure everything shows up correctly

Fix missing tags, typos, or broken links/images

✅ Bonus Tip:

Keep saving your file as you work to avoid losing progress
#Html #experiences

85 viewsedited 12:39

Full Stack Camp

🔥🔥 Project 1
📢 Final HTML Practice Challenges Before Wrapping Up!

🎯 Your Task: Build the following challenges using all the HTML tags and methods we’ve learned so far.
You can even add extra things using any tag or method we might not have mentioned directly — creativity is welcome!

✅ Challenge 1: Restaurant Web Page 🍽️
What to Include:

➡️Restaurant name and logo (header)
➡️Menu table with:
➤ Food item, price, ingredients, availability
➡️Images of dishes (use alt text)
➡️Restaurant branches:
location, opening hours, contact numbers
➡️Upcoming events or offers:
special nights, discounts
➡️Contact form for booking or feedback
➡️Footer: Address, social links, copyright

💡 Don’t forget: Use lists for menus too (ul or ol), add navigation links, semantic tags like <section>, <nav>, <footer>!

✅ Challenge 2: Book Store Catalog 📚

What to Include:

➲Store name and logo
➲Divide content into clear sections using headings:
      ➤ Fiction
      ➤ Science
      ➤ Biographies
      ➤ Newspaper & Magazines
➲For each section:
       ➤ Book cover image
       ➤ Title, author, price (in table)
       ➤ Short description
➲Opening and closing times table
➲Contact form or order request form

💡 Bonus: Include a small “about us” section and use <div> and <span> where helpful!

✅ Challenge 3: Scholarship Application Page 🎓

What to Include:

➥University or organization name and logo
➥Section describing the university/organization (mission, vision, departments)
➥List of available scholarships:
       ➤ Types, benefits, duration
➥Requirements list:
        ➤ GPA, documents, deadlines
➥Application form:
       ➤ Name, birth date, education background
       ➤ Attach documents field (file input)
       ➤ Checkbox for agreement to terms
       ➤ Submit button

💡 Bonus: Add tables to show scholarship comparison or eligibility.

✅ Important Notes for All Challenges:
➤ Use:
     ➛<header>, <footer>, <nav>, <main>, <section>
     ➛<table>, <ul>, <ol>, <form>, <input>, <textarea>, <button>
     ➛Images <img>, videos <video>, audio <audio>
    ➛ if useful <div>, <span>, class and id attributes

➤ Use any other tags or elements we learned: even things like <abbr>, <hr>, <br>.

✅ When You’re Done:

Share your work (screenshot or code) in the group!
Invite your friends to join the channel and learn with us.
✌️Stay well and get ready for our next topic: CSS Styling!

#Week1 #Html #project #project1

86 viewsedited 18:45

Full Stack Camp

Use this code for now for your image's size to decrease. Put it before <body>. You can change the width to your preferences.