Full Stack Camp

Week 1 Day 2 : Introduction to HTML

🌍 Topic: “What is HTML?” – Explained with Local Examples

🎯 Goal: Understand what HTML is, why it matters, and how it works.

🥁 welcome to Day 2 of your coding journey in Fullstack Summer Camp!

🎉 You made it through Day 1! Now let’s get our hands into the first real tool of a fullstack developer: HTML.

Let’s break it down like we’re chatting at a market or in a library — simple, real, relatable.

🌐 1. What Is HTML?
HTML = HyperText Markup Language
HTML is like the skeleton or structure of every website. It's the language used to structure content on the web.
It’s NOT a programming language. It doesn’t do calculations or logic.
It simply tells the browser how to display content like:
📰 Headings
📄 Paragraphs
🖼️ Images
🔗 Links
📋 Forms

💬 Think of HTML as the initial design of a house — walls, doors, and windows — before painting or electricity

🏘️ 2. Ethiopian Analogy – The Injera Plate
Let’s say you’re serving injera be wot at a restaurant.
➾➾The injera (the plate) = HTML — it holds everything.
➾➾The wot, salad, shiro, doro = content (text, images, links).
➾➾The plate’s shape and arrangement = structure, defined by HTML.
Then, later, you’ll add:
➾➾CSS = for making it look nice
➾➾JavaScript = to make it interactive (like delivering it hot and fresh, or adjusting spice level on request)

🧠 3. What Does “HyperText” Mean?
HyperText just means

Text with links that take you somewhere else

Like a news site with headlines that click into full articles.
When you click “Go to full article” → You’re using HyperText.

🏗️ 4. HTML Structure

Before we build a website, let’s understand how the pieces fit together. Just like a traditional gojo (hut) has a roof, walls, and a door — every webpage has its own basic structure.”
A basic webpage is made of:

🧾 A declaration (like saying: ‘I’m writing in HTML!’)
📦 A box that wraps everything (<html>)
🧠 A hidden brain (<head>) — title, settings
👀 A visible body (<body>) — all your content

Let’s build a traditional hut with HTML

<!DOCTYPE html>
<html>
<head>
   <title>My First Page</title>
</head>
<body>
   <h1>Welcome to My Gojo!</h1>
   <p>This is a simple webpage built with HTML.</p>
</body>
</html>

relax 😁, we will see them each by each.

🔤 5. Most Common HTML Tags
Here's a list of the most common HTML tags along with what they’re used for:
<!DOCTYPE html>
Telling it that you are writing Html5
<html>
The root of every HTML document. It wraps all the code on your web page.

<html>

</html>

<head>
Contains metadata (information about the page) like the title, fonts, or linked files. This part doesn't show on the actual page.

<head>
<title>My Page</title></head>

<title>
Sets the text shown in the browser tab.

<title>Welcome to My Website</title>

<body>
Everything inside this tag is visible on the web page. This is where your content goes — headings, paragraphs, images, etc.

<body>
<h1>Hello!</h1>
</bimages

<h1> to <h6>
Headings. <h1> is the biggest and most important, while <h6> is the smallest.

<h1>Main Title</h1>
<h2>Section Title</h2>

<p>
Used for paragraphs of text.

<p>This is a paragraph of text.</p>

<a>
Creates a hyperlink. You can link to websites,pages, or files.

<a href="https://example.com">Visit Example</a>

<img>
Displays an image. You must include the src (image URL or path) and alt (alternative text for screen readers).

<img src="cat.jpg" alt="A cute cat">

<ul>, <ol>, <li>
Create lists.
<ul>..... is an unordered (bulleted) list
<ol>...... is an ordered (numbered) list
<li>....... is a list item (used inside both)

<ul>
<li>Injera</li>
<li>Shiro</li>
</ul>

<br>
Adds a line break — moves text to the next line without starting a new paragraph.

<p>Hello<br>World</p>

<hr>
Adds a horizontal line across the page. Good for separating content.

<hr>

<strong> and <em>
Used for emphasizing text.
<strong> = bold and important
<em> = italic and emotional emphasis

<p>This is <strong>very important</strong>.</p>
<p>Please <em>pay attention</em>.</p>

105 viewsedited 13:14