HTML Part-5: Navigation aur CSS ka Introduction
Table of Contents
(Ek Webpage ko Interactive aur Stylish Banane ka Pehla Kadam)
Aaj hum HTML ke naye part mein navigation aur CSS ka introduction dekhenge. Agar aapne HTML ke pehle ke parts nahi padhe hain, toh sabse pehle unhe zarur dekhein:
- HTML Part-1: Basics of HTML
- HTML Part-2: Styling aur Elements ka Structure
- HTML Part-3: Forms aur Multimedia
Is post mein hum samjhenge ki navigation bar kaise banate hain aur CSS (Cascading Style Sheets) ka use karke apne webpage ko kaise ekdum stylish banaya jaa sakta hai. Aapko practical examples ke saath outputs milenge aur homework bhi diya jayega, jo aapko practice mein help karega.
Navigation Bar ka Introduction
Navigation bar ek webpage ka wo hissa hota hai jo users ko alag-alag pages ya sections tak le jaata hai. Ye ek tarah ka menu hota hai jo kisi bhi website ka important part hai.
Basic Structure of Navigation Bar
Navigation bar banane ke liye hume <nav> tag ka use karte hain. Iske andar links daalne ke liye <a> (anchor) tag ka use hota hai.
Example: Simple Navigation Bar
<!DOCTYPE html>
<html>
<head>
<title>Navigation Bar Example</title>
</head>
<body>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#services">Services</a> |
<a href="#contact">Contact</a>
</nav>
</body>
</html>
Output:
Aapko ek simple horizontal menu milega jisme links honge:
- Home
- About
- Services
- Contact
Yeh links sections ya pages ko refer karte hain.
CSS ka Introduction
CSS ka full form hai Cascading Style Sheets. Ye HTML elements ko style karne ke liye use hota hai. Iska kaam hai ek webpage ko visually appealing banana.
CSS Kaise Likhein?
CSS likhne ke 3 tarike hote hain:
- Inline CSS: Directly element ke andar likha jata hai.
- Internal CSS:
<style>tag ke andar likha jata hai, jo<head>section mein hota hai. - External CSS: Alag file (.css extension) mein likha jata hai aur HTML file ke saath link hota hai.
1. Inline CSS
Inline CSS ka use ek specific element ko style karne ke liye hota hai.
Example: Inline CSS ka Use
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue;">Welcome to My Website</h1>
<p style="font-size: 16px; color: gray;">Yeh ek paragraph hai jo inline CSS se style kiya gaya hai.</p>
</body>
</html>
Output:
- Heading blue color mein dikhegi.
- Paragraph ka size 16px aur color gray hoga.
2. Internal CSS
Is tarike mein CSS rules <style> tag ke andar likhe jaate hain.
Example: Internal CSS ka Use
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: green;
text-align: center;
}
p {
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<h1>Internal CSS Example</h1>
<p>Yeh paragraph hai jo internal CSS ka use karke style kiya gaya hai.</p>
</body>
</html>
Output:
- Background light gray hoga.
- Heading green color mein center-aligned hogi.
- Paragraph ka font size 18px aur color dark gray hoga.
3. External CSS
External CSS ka use ek alag file mein styling rules likhne ke liye hota hai. Ye bade projects ke liye best practice hai.
Example: External CSS ka Setup
- Create an HTML File:
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>External CSS Example</h1>
<p>Yeh paragraph external CSS se style kiya gaya hai.</p>
</body>
</html>
- Create a CSS File (style.css):
body {
font-family: Verdana, sans-serif;
background-color: #e6f7ff;
}
h1 {
color: #003366;
text-align: center;
}
p {
font-size: 16px;
color: #006699;
}
Output:
- Heading blue shade mein dikhegi aur center-aligned hogi.
- Background light blue hoga.
- Paragraph ka font size 16px aur color teal hoga.
Navigation Bar with CSS
CSS ka use karke navigation bar ko aur bhi attractive banate hain.
Example: Stylish Navigation Bar
<!DOCTYPE html>
<html>
<head>
<title>Stylish Navigation Bar</title>
<style>
nav {
background-color: #333;
overflow: hidden;
}
nav a {
float: left;
color: white;
text-decoration: none;
padding: 14px 20px;
}
nav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</body>
</html>
Output:
A professional-looking navigation bar with hover effects.
Homework
- Apne HTML project mein ek stylish navigation bar add karke CSS ka use kijiye.
- Try kar ke dekhein inline, internal, aur external CSS kaise kaam karta hai.
- Ek webpage banayein jo semantic elements aur CSS se fully styled ho.
Conclusion
CSS aur navigation ka sahi use aapke webpages ko visually attractive aur interactive banata hai. Aapne yahan navigation ka structure, CSS ke types, aur unke examples dekhe. Next part mein hum CSS ke advanced concepts aur animations seekhenge. Stay tuned!
Previous Parts:
