TechTicket | HTML Fundamentals

🎯 Session Overview

Welcome to the world of web development! Before we can start typing code and building amazing websites, we need to understand how the digital world actually works.

In this session, you will learn:

What the Internet and the Web actually are.
How a Server talks to your Web Browser.
What HTML is and why it's the skeleton of every website.
How to write and run your very first HTML webpage!

🌍 What is the Internet?

You use the Internet every day to play online games, watch YouTube, or scroll through Instagram. But what is it, really?

In simple terms, the Internet is a massive, global network of connected computers.

Imagine millions of invisible cables and wireless signals connecting your laptop or phone to computers in Japan, America, and Europe. Because these computers are connected, they can send messages and data to each other instantly.

🗄️ What is a Server?

A server is just a very powerful, specialized computer. Unlike your laptop, which you turn off when you go to sleep, servers stay on 24 hours a day, 7 days a week.

What is their job? To store website files and "serve" them to you.

Think of it like a restaurant: You (the user) order a pizza. The waiter (the Internet) takes your order to the kitchen (the Server). The kitchen prepares the pizza (the Website) and the waiter brings it back to your table!

🕸️ What is the Web (and Web Browsers)?

People often confuse the "Internet" with the "Web", but they are different!

If the Internet is the roads and highways connecting the world, the Web (World Wide Web) is all the shops, houses, and buildings built on those roads. The Web is a massive collection of websites (like Wikipedia, Google, Netflix) that are connected together by clickable links.

What is a Web Browser?

When the server sends website files to your computer, they look like confusing, messy code. Your computer needs a "translator" to turn that code into beautiful colors, buttons, and images.

A Web Browser is software that translates website code. You are using one right now! Examples include:

Google Chrome
Apple Safari
Microsoft Edge

🦴 What is HTML?

When you build a house, you have to put up a wooden skeleton or frame first, before you can paint the walls or add furniture.

HTML stands for HyperText Markup Language. It is the "skeleton" of every single web page on the internet.

HTML does not control the design, colors, or animations of a website. It simply tells the browser what the content is. For example, HTML tells the browser: "This is a big title, this is a paragraph, and this is an image."

🏗️ The Structure of an HTML Document

Every HTML page ever created follows a specific, organized structure. It uses things called Tags, which are words wrapped in angle brackets like this: <tag>.

Here is the "sandwich" structure of a web page:

<html>: The main wrapper. Everything in your website lives inside this tag.
<head>: The "brain". It contains hidden information about your page that the user doesn't see directly on the screen.
<title>: Lives inside the head. This is the text that appears on the top tab of your browser window!
<body>: The "visible" part. Any text, images, or buttons you want the user to see must be placed inside the body tags!

💻 Your First HTML Page

It's time to code! Let's build a real, working web page. Look at the code below.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <!-- This is a heading -->
    <h1>Hello, TechTicket!</h1>
    
    <!-- This is a paragraph -->
    <p>I am learning how to build websites.</p>
  </body>
</html>

Most tags in HTML come in pairs: an opening tag <tag> and a closing tag </tag> with a forward slash.

<!DOCTYPE html>: This tells the browser, "Hey, I am writing this in modern HTML5!"
<h1>...</h1>: Stands for Heading 1. It makes the text very large and bold, like a newspaper headline.
<p>...</p>: Stands for Paragraph. It creates a block of normal, readable text.

🏋️ Practice Exercises

Copy the code from the example above into your code editor. Now, let's change it!

Exercise 1: The Tab Name

Change the code so that the browser tab says "My Cool Website" instead of "My First Page".

Look inside the <head> section. Change the text between the <title> tags!

Exercise 2: Introduce Yourself

Change the main big heading so that instead of saying "Hello, TechTicket!", it says your actual name (Example: "Hello, I am Alex!").

Look inside the <body> section. Find the <h1> tag and change the text inside it.

Exercise 3: Gamer Talk

Add a brand new paragraph below the first one. In this new paragraph, write a sentence about your favorite video game.

You need to write a new opening <p> tag, type your sentence, and then close it with a </p> tag right before the </body> tag.

🔥 Mini Challenge

Delete everything inside the <body> of your code, so it is totally empty. Now, try to build the content from scratch from memory!

Goal: Create a page that contains your Name as a large heading, and a paragraph describing your favorite hobby.

<body>
  <h1>Sarah</h1>
  <p>My favorite hobby is playing basketball.</p>
</body>

🏠 Homework Assignment

Create a brand new HTML file from scratch! You are building a mini "About Me" page.

Your web page must include:

Your name (using a heading).
Your favorite game (using a paragraph).
Your favorite food (using another paragraph).

Save your file and open it in your web browser to see your amazing work!

📚 Session Summary

The Internet is a global network of connected computers.
A Server is a computer that stores website files and sends them to you when you request them.
A Web Browser (like Chrome) translates HTML code into the beautiful pages you see.
HTML is the structural skeleton of a web page.
Every HTML page needs <html>, <head>, and <body> tags.
The <h1> tag creates big titles, and the <p> tag creates regular text paragraphs.