HTML, Javascript Course-
Learn HTML, Javascript from Scratch
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-
प्रिय भारतीय दर्शकों, इस वेबसाइट पर सब कुछ पूरी तरह निशुल्क है और यदि यह वेबसाइट आपको ज़रा भी पसंद आई हो और अगर आपको प्राचीन, भूतिया, ऐतिहासिक, डरावनी, पंचतंत्र, विक्रम बैताल, अरेबियन नाइट्स और रहस्यमयी कहानियां पसंद हैं तो कृपया नीचे दिए गए यूट्यूब चैनल के लिंक पर क्लिक करके चैनल पर जाएं और चैनल को सब्सक्राइब करें ताकि आप चैनल को भूल ना जाएं और धन्यवाद स्वरूप वेबसाइट आपको आयुर्वेद की सबसे प्रसिद्ध पुस्तकों में से एक “अष्टांग हृदय” की पीडीएफ मुफ्त डाउनलोड करने की सुविधा देती है ! Link नीचे दिया गया है, धन्यवाद!
विक्रम बैताल, अरेबियन नाइट्स, पंचतंत्र, स्त्री जातक, डरावनी, असाधारण, भूत, रहस्यमय कहानियां देखने के लिए यहाँ क्लिक करें और यह 👉 youtube चैनल सब्सक्राइब करे! बहुत बहुत धन्यवाद!🎃 Get Your Free Ashtanga Hridya PDF!
📥 Download Your PDFLearn 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!
