Build your coding skills step-by-step. Our HTML, Javascript course starts with the basics — tags, elements, and structure — and guides you toward creating fully functional websites. No prior experience needed!
NOTE-visitors for practice first download any good html code editor (with good rating) from playstore. Below is HTML course but first read just below written notice. Thanks!
📢Attention Please-
Dear visitors this website is providing you HTML,CSS,Javascript learning so if you please then please subscribe below given youtube horror channel,it will be a great help to us. Thanks
Dear visitors please subscribe this horror👉 youtube channel. ThanksClick here to Learn HTML,CSS,Javascript & also learn from below given course
Click here to know, “How to make a wordpress website”
Learn HTML - From Hello World to Styling
Lets Go 🚀
1. Your First HTML Program - Hello World
Every HTML document starts with a basic structure:
<html>
<head>
<title>My First Page</title>
</head>
<body>
Hello World
</body>
</html>
When you open this file in a browser, it will simply show the text Hello World.
---
2. Adding a Heading
Headings make text larger and more important. HTML has headings from <h1> (largest) to <h6> (smallest).
Example:
<h1>This is a Main Heading</h1>
<h2>This is a Smaller Heading</h2>
---
3. Writing a Paragraph (Passage)
Paragraphs in HTML are made using <p>.
<p>This is my first paragraph. I can write a lot of text here and the browser will automatically arrange it neatly.</p>
---
4. Adding a Title to the Browser Tab
The <title> tag goes inside <head> and shows text on the browser’s tab.
<head>
<title>My Awesome Page</title>
</head>
---
5. Creating a Link
Links are made using the <a> tag.
<a href="https://example.com">Click Here</a>
When clicked, it opens the given web address.
---
6. Adding an Image
<img src="image.jpg" alt="Description of image">
---
7. Bold and Italic Text
<b>This is bold</b>
<i>This is italic</i>
---
8. Line Breaks
Hello<br>World
This puts “World†on the next line.
---
9. Ordered List (Numbers)
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
---
10. Unordered List (Bullets)
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
---
11. Adding a Horizontal Line
<hr>
---
12. Adding a Background Color
CSS is used to make HTML colorful and beautiful.
Example:
<body style="background-color: lightblue;">
---
13. Changing Text Color
<p style="color: red;">This text is red.</p>
---
14. Changing Font Size
<p style="font-size: 20px;">This text is larger.</p>
---
15. Centering Text
<p style="text-align: center;">Centered Text</p>
---
16. Combining Multiple Styles
<p style="color: green; font-size: 25px; text-align: center;">Styled Text</p>
---
17. Adding a Simple CSS Section
Instead of writing styles inside each tag, we can put them inside <style> in the <head> section.
<head>
<style>
body { background-color: lightyellow; }
h1 { color: blue; text-align: center; }
p { color: darkgreen; font-size: 18px; }
</style>
</head>
---
18. Adding a Table
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
---
19. Adding Comments (Not Shown in Browser)
<!-- This is a comment -->
---
20. Putting It All Together
A complete HTML page with heading, paragraph, link, and style:
<html>
<head>
<title>Learning HTML</title>
<style>
body { background-color: #f0f0f0; }
h1 { color: darkblue; }
p { color: black; font-size: 18px; }
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is my first HTML page with CSS. HTML is used for content, and CSS makes it colorful and beautiful!</p>
<a href="https://example.com">Visit Example</a>
</body>
</html>
---
Final Note:
HTML is for content - headings, paragraphs, links, images, tables.
CSS is for styling - colors, fonts, backgrounds, spacing, making it look beautiful.
HTML Learning Book - 50+ Examples
---
1. Hello World - Your First HTML Page
<html>
<head>
<title>My First Page</title>
</head>
<body>
Hello World
</body>
</html>
---
2. Headings - h1 to h6
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Smaller Heading</h3>
<h4>Even Smaller</h4>
<h5>Almost Tiny</h5>
<h6>Smallest Heading</h6>
---
3. Paragraphs
<p>This is my first paragraph in HTML.</p>
---
4. Title in Browser Tab
<head>
<title>My Webpage</title>
</head>
---
5. Line Break
Hello<br>World
---
6. Horizontal Line
<hr>
---
7. Bold and Italic
<b>This is bold</b>
<i>This is italic</i>
---
8. Underline
<u>This is underlined</u>
---
9. Superscript & Subscript
H<sub>2</sub>O
X<sup>2</sup>
---
10. Creating Links
<a href="https://example.com">Visit Example</a>
---
11. Open Link in New Tab
<a href="https://example.com" target="_blank">Open in New Tab</a>
---
12. Adding Images
<img src="image.jpg" alt="Description">
---
13. Image with Width & Height
<img src="image.jpg" width="200" height="150">
---
14. Ordered List (Numbers)
<ol>
<li>First</li>
<li>Second</li>
</ol>
---
15. Unordered List (Bullets)
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
---
16. Nested Lists
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Orange</li>
</ul>
</li>
</ul>
---
17. Table - Basic
<table border="1">
<tr><th>Name</th><th>Age</th></tr>
<tr><td>John</td><td>25</td></tr>
</table>
---
18. Table with Caption
<table border="1">
<caption>Student List</caption>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>John</td><td>25</td></tr>
</table>
---
19. Table Row Span
<td rowspan="2">Merged Cell</td>
---
20. Table Column Span
<td colspan="2">Merged Cell</td>
---
21. Background Color in Body
<body style="background-color: lightblue;">
---
22. Text Color
<p style="color: red;">This is red text</p>
---
23. Font Size
<p style="font-size: 20px;">Bigger text</p>
---
24. Centered Text
<p style="text-align: center;">Centered</p>
---
25. CSS in Head
<style>
h1 { color: blue; }
p { color: green; }
</style>
---
26. CSS Class
<style>
.highlight { color: red; }
</style>
<p class="highlight">Important text</p>
---
27. CSS ID
<style>
#main { background-color: yellow; }
</style>
<p id="main">Special paragraph</p>
---
28. Adding a Comment
<!-- This is a comment -->
---
29. Marquee (Scrolling Text)
<marquee>Scrolling Text</marquee>
---
30. Preformatted Text
<pre>
This is
exactly as typed
in HTML
</pre>
---
31. Blockquote
<blockquote>This is a quoted text.</blockquote>
---
32. Code Tag
<code>print("Hello")</code>
---
33. Button
<button>Click Me</button>
---
34. Button with Link
<button onclick="window.location.href='https://example.com'">Go</button>
---
35. Form - Basic
<form>
Name: <input type="text">
</form>
---
36. Form with Submit Button
<form>
Name: <input type="text">
<input type="submit" value="Send">
</form>
---
37. Checkbox
<input type="checkbox"> I agree
---
38. Radio Button
<input type="radio" name="choice"> Yes
<input type="radio" name="choice"> No
---
39. Drop-down Menu
<select>
<option>Apple</option>
<option>Banana</option>
</select>
---
40. Textarea
<textarea rows="4" cols="30"></textarea>
---
41. Audio
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
---
42. Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
---
43. Favicon
<link rel="icon" href="favicon.ico" type="image/x-icon">
---
44. Inline Style
<p style="color: blue;">Blue text</p>
---
45. Div Tag
<div style="background-color: yellow;">Content here</div>
---
46. Span Tag
<p>This is <span style="color:red;">red</span> text.</p>
---
47. Link to Email
<a href="mailto:test@example.com">Email Us</a>
---
48. Link to Phone Number
<a href="tel:+123456789">Call Us</a>
---
49. Image as a Link
<a href="https://example.com"><img src="image.jpg"></a>
---
50. Responsive Image
<img src="image.jpg" style="max-width: 100%;">
---
51. Inline CSS for Multiple Styles
<p style="color: red; font-size: 20px; text-align: center;">Styled</p>
---
52. CSS for All Paragraphs
<style>
p { color: purple; }
</style>
---
53. Gradient Background
<style>
body {
background: linear-gradient(to right, red, yellow);
}
</style>
---
54. Shadow for Text
<style>
h1 { text-shadow: 2px 2px 5px gray; }
</style>
---
55. Border Around Element
<style>
p { border: 2px solid black; padding: 10px; }
</style>
---
Final Reminder:
HTML = Structure & Content.
CSS = Colors, Styles, Layouts.
JavaScript (not shown here) = Makes it interactive.
Below is a very basic online restaurant HTML app code example - name, header, footer, 5 items with images, and a Buy Now button (Cash on Delivery).
---
Basic Online Restaurant App
<html>
<head>
<title>My Restaurant</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #fafafa;
}
header {
background-color: darkred;
color: white;
padding: 15px;
text-align: center;
font-size: 30px;
}
main {
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
background-color: white;
border: 1px solid #ddd;
border-radius: 8px;
margin: 10px;
padding: 10px;
width: 200px;
text-align: center;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
.item img {
width: 100%;
height: 150px;
border-radius: 5px;
}
.item button {
background-color: green;
color: white;
padding: 10px;
border: none;
margin-top: 10px;
cursor: pointer;
border-radius: 5px;
}
.item button:hover {
background-color: darkgreen;
}
footer {
background-color: darkred;
color: white;
text-align: center;
padding: 10px;
position: relative;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
My Restaurant
</header>
<main>
<div class="item">
<img src="pizza.jpg" alt="Pizza">
<h3>Cheese Pizza</h3>
<p>Price: $50</p>
<button>Buy Now (Cash on Delivery)</button>
</div>
<div class="item">
<img src="burger.jpg" alt="Burger">
<h3>Veg Burger</h3>
<p>Price: $20</p>
<button>Buy Now (Cash on Delivery)</button>
</div>
<div class="item">
<img src="pasta.jpg" alt="Pasta">
<h3>White Sauce Pasta</h3>
<p>Price: $30</p>
<button>Buy Now (Cash on Delivery)</button>
</div>
<div class="item">
<img src="sandwich.jpg" alt="Sandwich">
<h3>Grilled Sandwich</h3>
<p>Price: $10</p>
<button>Buy Now (Cash on Delivery)</button>
</div>
<div class="item">
<img src="momos.jpg" alt="Momos">
<h3>Steamed Momos</h3>
<p>Price: $10</p>
<button>Buy Now (Cash on Delivery)</button>
</div>
</main>
<footer>
© 2025 My Restaurant. All Rights Reserved.
</footer>
</body>
</html>
---
How it Works:
Header 'n’ Restaurant name at the top
Main section 'n’ 5 food items with images, prices, and buttons
Footer 'n’ Simple copyright
CSS 'n’ Makes it colorful and beautiful
Buy Now button 'n’ Just a placeholder (no backend yet), but can be linked later to a payment system or order form
Congratulations! Your HTML course is complete now!
