A comprehensive guide to HTML, from beginner to expert level
HTML (Hypertext Markup Language) ek markup language hai jo webpages banane ke liye istemal hota hai. HTML web browser ko batata hai ki content kaise dikhna chahiye. HTML ek simple aur powerful language hai jise har web developer ko seekhna chahiye.
Har HTML document ka ek basic structure hota hai. Is structure mein <html>, <head>, aur <body> tags hote hain.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML mein kaafi tarah ke tags hote hain jo content ko define karte hain. Kuch common tags yeh hain:
<h1> - <h6>: Heading tags<p>: Paragraph<a>: Anchor (links)<img>: Image<ul>: Unordered list<ol>: Ordered list <h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
HTML forms ka use user se data input lene ke liye kiya jata hai. Forms mein different types of inputs hote hain, jaise text fields, radio buttons, checkboxes, etc.
<form action="submit_form.php">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Submit">
</form>
Yeh form ek simple contact form hai jo name aur email lene ke liye use hota hai.
HTML tags mein attributes hote hain jo tag ke functionality ko modify karte hain. Kuch common attributes yeh hain:
href: Link ke address ko specify karta haisrc: Image ka source (file path) specify karta haialt: Image description provide karta hai (accessibility ke liye)class: CSS styling ke liye classes specify karta haiid: Unique identification dene ke liye <a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="Description">
HTML5 ne multimedia elements ka support diya hai jaise <audio> aur <video>, jo ki media files ko directly webpages par display karte hain.
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
HTML5 mein kayi APIs (Application Programming Interfaces) aaye hain jo webpages ko interact aur dynamic banane mein madad karte hain. Jaise ki Geolocation API, Web Storage API, Web Workers, Canvas API, etc.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
alert("Latitude: " + position.coords.latitude + "\nLongitude: " + position.coords.longitude);
});
} else {
alert("Geolocation not supported");
}
Web Accessibility ka matlab hai ki aapki website sabhi users, including disabled users ke liye accessible ho. Iske liye, HTML tags aur attributes ka proper use karna zaroori hai. Kuch tips:
alt attributes for imagesaria-label for defining rolesSEO (Search Engine Optimization) se websites ko search engines ke liye optimize kiya jata hai. Isme proper tag use, meta tags, heading structure, aur content ko optimize karna shamil hai.
<title> and <meta> tags.<article>, <section>, <header>.alt tags.HTML5 ne semantic elements introduce kiye hain, jo content ko zyada meaning dete hain. Jaise:
<header>: Page ke header ke liye<footer>: Page ke footer ke liye<article>: Independent content ke liye<section>: Content sections ke liyeWeb Storage API ko use karke hum browser mein data store kar sakte hain. Yeh localStorage aur sessionStorage ko support karta hai.
localStorage.setItem("username", "JohnDoe");
var user = localStorage.getItem("username");
alert(user);
Responsive web design ka matlab hai ki website har device par achhe se dikhe, chahe wo mobile ho ya desktop. Yeh CSS media queries ka use karke achieve kiya jata hai.
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
CSS Grid aur Flexbox dono hi layout systems hain jo webpages ko responsive aur flexible banane mein madad karte hain. Grid use karne se rows aur columns ka structure banaya jata hai, jabki Flexbox se elements ko easily align aur distribute kiya jata hai.
.container {
display: flex;
justify-content: space-between;
}
.item {
width: 30%;
}
JavaScript ko HTML mein integrate karke hum webpages ko dynamic aur interactive bana sakte hain. JavaScript ka use forms, animations, events, aur user interactions ko handle karne ke liye hota hai.
<script>
alert("Hello, World!");
</script>
PWA ek type ki web application hai jo offline kaam kar sakti hai aur mobile apps jaise experience deti hai. Iske liye, Service Workers aur Web App Manifest ka use kiya jata hai.
WebSockets ka use real-time communication ke liye hota hai, jaise chat applications ya live notifications mein. WebSocket ek persistent connection establish karta hai.
var socket = new WebSocket("ws://example.com/socket");
socket.onmessage = function(event) {
alert(event.data);
};
HTML5 mein drag-and-drop functionality ka support hai, jisme user elements ko ek location se doosri location par move kar sakte hain.
<div draggable="true" ondragstart="drag(event)" id="drag1">Drag me</div>
HTML code likhne ke kuch best practices hain jo readability aur maintainability ko improve karte hain:
HTML ek essential web development skill hai. Is course mein humne basic se leke advanced topics cover kiye hain jaise forms, multimedia, APIs, accessibility, aur SEO. Ab aap HTML ka istemal karke professional webpages bana sakte hain.