🌐 Learn to Build Webpages from Scratch!
👋 Welcome to HTML
HTML (HyperText Markup Language) is the fundamental building block of web development. Think of it as the skeleton that provides structure to every website you see.
This beginner-friendly guide will walk you through the basics of HTML with clear explanations, real code, and visual outputs. Let’s bring your first webpage to life!
📚 What You’ll Learn
- ✅ What is HTML?
- ✅ Basic Structure of an HTML Document
- ✅ Essential HTML Elements (Headings, Paragraphs, Links, Images, Lists, Tables)
- ✅ Styling with Inline CSS
- ✅ Creating Forms
- ✅ How to Save & Run HTML Files
- ✅ Practice Exercises
🔍 Part 1 – What is HTML?
HTML is a markup language used to define the structure of content on the web. It uses tags to tell browsers how to display elements like text, images, and links.
HTML tags usually come in pairs like <p> and </p>, where the first tag starts the element and the second ends it.
Example:
Output:
This is a paragraph.
🧠 Fun Fact:
HTML was first introduced in 1991 by Tim Berners-Lee — the inventor of the World Wide Web!
💾Part 2 – How to Save and Run HTML Code
📥 Saving Your HTML File
- Open a text editor (e.g., Notepad, VS Code, or Sublime Text).
- Type or paste your HTML code.
- Save the file with a
.htmlextension — likemyfile.html.
- 🪟 Windows: In Notepad, choose “Save as type” → All Files and name it
example.html. - 🍏 Mac: Use TextEdit in plain text mode. Save as
.htmlfile.
🚀 Running Your HTML File
- Locate your saved file on your computer.
- Right-click → Open with → Choose your browser (Chrome, Firefox, etc.).
- Your browser will render the webpage!
📐Part 3 – Basic Structure of an HTML Document
Every HTML file starts with this standard skeleton:
Output: Output of the above code is:-
Welcome to HTML
This is my first webpage!
🧠 What’s Happening Here?
<!DOCTYPE html>– Declares the HTML version (HTML5).<html>– Root element that wraps everything.<head>– Contains metadata like title and charset.<title>– used to define the title of the webpage, which is displayed in the browser’s title bar or tab.<body>– Where the visible content goes.
💡 Pro Tip: You can open your file in multiple browsers to see how each one renders the page!
🔑 Part 4 – Key Elements of HTML
1️⃣ Headings
HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). Use them to structure your content like a book with titles and subtitles.
Output:
This is Heading 1
This is Heading 2
This is Heading 3
🧠 Tip:
Use <h1> only once per page — it’s usually the main title.
2️⃣ Paragraphs
Paragraphs are used to group sentences together. Text inside <p> tags automatically breaks to a new line and adds spacing.
This is a paragraph of text.
This is another paragraph with bold and italic text.
3️⃣ Links
Use <a> tags to create hyperlinks. The href attribute defines the destination URL.
💡 Tip: Use target="_blank" to open the link in a new tab.
4️⃣ Images
Use the <img> tag to display images. You must provide the src (image path) and alt (text shown if the image fails).
Output:-
❗ Note: Ensure your image file is in the same folder as your HTML file or use a full URL.
📋 Part 5 – Lists in HTML
HTML provides two main types of lists: Ordered lists (numbered) and Unordered lists (bulleted).
🔹 Unordered List
Output:
- Apple
- Banana
- Orange
🔸 Ordered List
Output:
- HTML
- CSS
- JavaScript
📊 Part 6 – Tables in HTML
Tables help organize data into rows and columns. Basic structure includes:
<table>— the wrapper element<tr>— defines each row<th>— defines header cells<td>— defines data cells
<th>Activity</th>
<td>Coding</td>
<td>Design</td>
| Day | Activity |
|---|---|
| Monday | Coding |
| Tuesday | Design |
💡 Pro Tip: Add style="border-collapse: collapse;" to tables for cleaner formatting.
🎨Part 7 – Inline CSS Styling
Inline CSS allows you to add styles directly within an HTML tag using the style attribute. It’s useful for quick styling and testing.
Output:
This is styled text.
✨ Common Inline Styles
color– text colorfont-size– size of the textbackground-color– background colorpadding– space inside the elementmargin– space outside the elementtext-align– alignment (left, center, right)
💡 Tip: For larger projects, it’s better to use internal or external CSS for better structure and scalability.
🧾 Part 8 -HTML Forms
Forms let users input data. They’re essential for things like sign-ups, searches, and contact pages.
<label>Name:</label>
<input type=“text” name=“name”><label>Email:</label>
<input type=“email” name=“email”><input type=“submit” value=“Submit”>
</form>
Output:
🔍 Other Common Form Elements
<textarea>– multi-line input<select>– dropdown menu<input type="radio">– single-choice options<input type="checkbox">– multiple-choice options<button>– custom buttons
⚠️ Note: Forms can be styled using CSS and are usually connected to backend languages (PHP, Python, etc.) to process user data.
🧪 Part 9 – Practice Makes Perfect!
Now it’s your turn to shine. Try building your own mini webpages using the HTML elements you’ve learned. Below are fun challenges that will test your understanding.
📘 Exercise 1: Personal Webpage
Create a webpage with:
- Your name in the title bar and an
<h1>heading - A short biography using
<p>tags - Styling using inline CSS (font size, colors)
🖼️ Exercise 2: Image & Link
Add the following:
- An image (either local or from the internet)
- A link to your favorite website
- Open the link in a new tab using
target="_blank"
✅ Exercise 3: Your Hobby List
Create a list of your hobbies using either:
<ul>for unordered list<ol>for ordered list
📅 Exercise 4: Weekly Schedule Table
Design a simple table showing your weekly routine. Include:
- Days of the week
- Activities or classes
🎉 Happy Coding and Welcome to the World of Web Development!
You now know how to structure webpages using HTML. The next step? Learn CSS for better styling and JavaScript for interactivity! 🚀Check our free CSS tutorial.
© 2025 | Created with ❤️ by costCoupon.com
