What You'll Learn Today
Welcome to your first web development lesson! Today marks the beginning of an exciting journey
where you'll learn to create websites from scratch. By the end of this lesson, you'll have built
your very first webpage and understand the fundamental building blocks that make up every
website on the internet.
Why Learn HTML?
HTML (HyperText Markup Language) is like the skeleton of a webpage - it gives structure and
meaning to all the content you see online. Every website you've ever visited, from Google to
YouTube to your favorite games, starts with HTML. Learning HTML is your first step into the
amazing world of web development!
Learning Objectives
-
Understand what HTML is - Learn how websites are built with code and
how HTML creates the structure of web pages
-
Create your first HTML file - Write actual code and see it come to life
in a web browser
-
Master basic HTML structure - Learn the essential elements that every
webpage needs to work properly
Understanding HTML Tags
HTML uses "tags" to tell the browser what each piece of content should be. Think of tags like
instructions - they tell the browser "this is a heading," "this is a paragraph," or "this is an
image." Let's explore the essential tags you'll use today:
This special tag tells the browser that this is an HTML5 document. It's like showing
your ID at the door - it helps the browser understand what type of file it's reading.
Always put this at the very top of your HTML file.
This is the main container that holds everything in your webpage. Think of it like a big
box that contains all your content. Everything else goes inside this tag.
The head section contains information ABOUT your webpage that visitors don't see
directly. It's like the envelope of a letter - it has important information, but it's
not the actual message.
This sets the text that appears in your browser tab. It's what people see when they
bookmark your page or see it in search results. Make it descriptive and interesting!
Everything inside the body tag is what visitors actually see on your webpage. Text,
images, buttons - if it's visible, it goes in the body. This is where the magic happens!
These create headings of different sizes. h1 is the biggest (like a book title), h2 is
smaller (like a chapter title), and so on. They help organize your content and make it
easy to read.
Use these for regular text content. Each p tag creates a new paragraph with space above
and below it. Most of your text content will be inside paragraph tags.
This tag displays images on your webpage. It's special because it doesn't need a closing
tag! You tell it which image to show using the "src" attribute, and you should always
include "alt" text to describe the image.
Your Mission
Now it's time to put this knowledge into practice! In the editor on the right, you'll see a basic
HTML structure already started for you. Your mission is to:
Pro Tip
The code will automatically run as you type, so you can see your changes immediately in the
preview below!
-
Customize the content - Change the text to make it about yourself. Add
your name, age, and favorite things!
-
Add more elements - Try adding more headings, paragraphs, or even
experimenting with the image
-
Watch it come to life - See how your HTML code transforms into a real
webpage in the preview
Take It Home
For homework, create your own "About Me" page using what you've learned today. Include your name,
age, hobbies, favorite foods, or anything else you'd like to share. Remember to use different
heading sizes and paragraphs to organize your information clearly.
This is just the beginning of your web development journey. In our next lesson, we'll learn how
to make your webpage look amazing with colors and styling using CSS!