Create Your First HTML Page
Start your web development journey by building your very first "Hello World" webpage!
What is HTML?
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page and consists of a series of elements that tell the browser how to display content.
š Think of HTML as:
- šļøThe Building's Framework - Creates the structure
- šThe Content Writer - Adds text, images, links
- šThe Organizer - Arranges content logically
HTML Powers the Web
Every website you visit is built with HTML. It's the foundation of web development!
š Step-by-Step Guide
Create Your HTML File
Create a new file called index.html on your computer.
š” Pro Tip
Name your first file index.html - browsers automatically look for this file when visiting a website!
How to create the file:
Write Basic HTML Structure
Every HTML page needs a basic structure. Copy this code into your index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello World! š</h1>
<p>Welcome to my first HTML page!</p>
</body>
</html>š Understanding the Structure
<!DOCTYPE html>Tells browser this is HTML5<html>Root element wrapping all content<head>Contains page info (not visible)<body>Contains visible content<h1>Main heading (largest text)<p>Paragraph for regular textSave and View Your Page
Save your file and open it in a web browser to see your creation!
How to open:
index.html fileš Congratulations!
You've just created your first web page! You're officially a web developer!
Hello World! š
Welcome to my first HTML page!
š® Interactive HTML Playground
Try It Yourself!
Edit the HTML code below and see your changes instantly in the preview.
<!DOCTYPE html>
<html>
<head>
<title>My Playground</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f0f8ff;
}
h1 { color: #2c5aa0; }
.fun {
background: yellow;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Hello World! š</h1>
<p>Welcome to <span class="fun">HTML Playground</span></p>
<p>Try changing this text!</p>
<button onclick="alert('You clicked me!')">Click Me!</button>
</body>
</html>Live Preview
š” Experiment Ideas:
- ā¢ Change "Hello World" to your name
- ā¢ Add more paragraphs with
<p> - ā¢ Try different emojis like šØ or ā
- ā¢ Change the background color in the style tag
š§© Common HTML Elements
Heading
<h1> to <h6>Creates headings of different sizes
<h1>Main Title</h1>Paragraph
<p>Creates a paragraph of text
<p>This is a paragraph.</p>Link
<a>Creates hyperlinks to other pages
<a href="https://example.com">Visit Site</a>Image
<img>Displays images on your page
<img src="image.jpg" alt="Description">List
<ul>, <ol>, <li>Creates ordered or unordered lists
<ul><li>Item 1</li></ul>Division
<div>Container for grouping elements
<div>Content here</div>What's Next?
You've taken your first step into web development! Ready to learn more?
You Did It!
You've created your first HTML page and started your web development journey!
Share your achievement with friends! š