HTML Full Advanced Course

A comprehensive guide to HTML, from beginner to expert level

1. Introduction to HTML

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.

2. HTML Structure

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>
    

3. HTML Tags

HTML mein kaafi tarah ke tags hote hain jo content ko define karte hain. Kuch common tags yeh hain:

Example:

            <h1>This is a heading</h1>
            <p>This is a paragraph of text.</p>
        

4. HTML Forms and Input

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.

5. HTML Attributes

HTML tags mein attributes hote hain jo tag ke functionality ko modify karte hain. Kuch common attributes yeh hain:

Example:

            <a href="https://www.example.com">Visit Example</a>
            <img src="image.jpg" alt="Description">
        

6. Multimedia Elements in HTML5

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>
    

7. HTML5 APIs

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.

Example (Geolocation API):

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    alert("Latitude: " + position.coords.latitude + "\nLongitude: " + position.coords.longitude);
                });
            } else {
                alert("Geolocation not supported");
            }
        

8. Accessibility in HTML

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:

9. SEO Optimization for HTML

SEO (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.

10. HTML5 Semantic Elements

HTML5 ne semantic elements introduce kiye hain, jo content ko zyada meaning dete hain. Jaise:

11. Web Storage

Web Storage API ko use karke hum browser mein data store kar sakte hain. Yeh localStorage aur sessionStorage ko support karta hai.

Example (LocalStorage):

            localStorage.setItem("username", "JohnDoe");
            var user = localStorage.getItem("username");
            alert(user);
        

12. Responsive Design

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;
            }
        }
    

13. CSS Grid and Flexbox

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.

Example (Flexbox):

            .container {
                display: flex;
                justify-content: space-between;
            }
            .item {
                width: 30%;
            }
        

14. JavaScript Integration

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>
    

15. Progressive Web Apps (PWA)

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.

16. WebSockets

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);
        };
    

17. HTML5 Drag-and-Drop

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>
    

18. Best Practices for HTML

HTML code likhne ke kuch best practices hain jo readability aur maintainability ko improve karte hain:

19. Conclusion

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.