Internet Chapter 21 : Web Development Basics (HTML, CSS, JavaScript)

Chapter 21 : Web Development Basics (HTML, CSS, JavaScript)

Introduction

Web development is the process of creating websites and web applications. It involves several technologies, with HTML, CSS, and JavaScript being the fundamental building blocks. This book will introduce you to these core technologies and their role in building functional and visually appealing web pages.

HTML (HyperText Markup Language)

What is HTML?

HTML is the standard language for creating web pages. It defines the structure of a webpage using various elements and tags.

Basic Structure of an HTML Document

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to Web Development</h1>
    <p>This is a basic HTML page.</p>
</body>
</html>

Common HTML Tags

<h1> to <h6>: Headings
<p>: Paragraph
<a href="URL">: Links
<img src="image.jpg" alt="Description">: Images
<ul>, <ol>, <li>: Lists (Unordered and Ordered)
<table>, <tr>, <td>: Tables
<form>: Forms for user input

Forms and Input Elements

Forms allow users to enter data on web pages. Example:

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
</form>

CSS (Cascading Style Sheets)

What is CSS?

CSS is used to style HTML elements and control the layout of web pages.

Types of CSS

Inline CSS: Applied directly to an element using the style attribute.
Internal CSS: Defined within a <style> tag in the <head> section.
External CSS: Stored in a separate .css file and linked using <link>.

CSS Syntax

selector {
    property: value;
}

Example:

body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
}

Common CSS Properties

color: Sets text color.
background-color: Sets background color.
font-size: Adjusts font size.
margin and padding: Controls spacing around elements.
border: Defines borders around elements.
display: Controls element visibility (block, inline, flex, etc.).

CSS Layout Techniques

Box Model: Margin, border, padding, and content.
Flexbox: Layout control using display: flex;.
Grid Layout: Advanced layout system using display: grid;.

JavaScript

What is JavaScript?

JavaScript is a programming language that adds interactivity and dynamic behavior to web pages.

JavaScript Syntax

JavaScript is embedded within <script> tags or in an external .js file. Example:

<script>
    alert("Hello, World!");
</script>

Variables and Data Types

let name = "John";  // String
let age = 25;        // Number
let isStudent = true; // Boolean

Functions in JavaScript

function greet() {
    alert("Welcome to Web Development!");
}
greet();

DOM (Document Object Model) Manipulation

The DOM allows JavaScript to interact with and modify HTML elements. Example:

document.getElementById("demo").innerHTML = "Hello, JavaScript!";

Event Handling

JavaScript can respond to user actions like clicks and keypresses.

document.getElementById("btn").addEventListener("click", function() {
    alert("Button Clicked!");
});

Bringing It All Together

A Simple Web Page with HTML, CSS, and JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Interactive Web Page</title>
    <style>
        body { text-align: center; font-family: Arial, sans-serif; }
        button { padding: 10px; font-size: 16px; }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p id="message">Click the button to see magic!</p>
    <button id="btn">Click Me</button>
    <script>
        document.getElementById("btn").addEventListener("click", function() {
            document.getElementById("message").innerHTML = "You clicked the button!";
        });
    </script>
</body>
</html>

Buy Best Books On Amazon :

अध्याय 21 : वेब विकास मूल बातें (HTML, CSS, जावास्क्रिप्ट)

Read in English

परिचय

वेब विकास (Web Development) वेबसाइटों और वेब एप्लिकेशन बनाने की प्रक्रिया है। इसमें कई तकनीकों का उपयोग किया जाता है, जिनमें HTML, CSS, और JavaScript मुख्य आधार होते हैं। यह पुस्तक आपको इन मूलभूत तकनीकों से परिचित कराएगी और यह बताएगी कि वेब पेज को आकर्षक और कार्यात्मक बनाने में इनका क्या योगदान है।

HTML (हाइपरटेक्स्ट मार्कअप लैंग्वेज)

HTML क्या है?

HTML वेब पेज बनाने की एक मानक भाषा है। यह विभिन्न तत्वों और टैग्स का उपयोग करके वेबपेज की संरचना को परिभाषित करता है।

HTML डॉक्युमेंट की मूल संरचना

<!DOCTYPE html>
<html>
<head>
    <title>मेरा पहला वेब पेज</title>
</head>
<body>
    <h1>वेब विकास में आपका स्वागत है</h1>
    <p>यह एक साधारण HTML पेज है।</p>
</body>
</html>

सामान्य HTML टैग्स

<h1> से <h6>: हेडिंग्स
<p>: पैराग्राफ
<a href="URL">: लिंक
<img src="image.jpg" alt="वर्णन">: इमेज
<ul>, <ol>, <li>: सूचियाँ (अनुक्रमित और क्रमबद्ध)
<table>, <tr>, <td>: टेबल्स
<form>: यूजर इनपुट के लिए फॉर्म

फॉर्म और इनपुट एलिमेंट्स

वेब पेज पर यूजर से डेटा प्राप्त करने के लिए फॉर्म का उपयोग किया जाता है। उदाहरण:

<form>
    <label for="name">नाम:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="सबमिट करें">
</form>

CSS (कैस्केडिंग स्टाइल शीट्स)

CSS क्या है?

CSS का उपयोग HTML तत्वों को स्टाइल करने और वेब पेज के लेआउट को नियंत्रित करने के लिए किया जाता है।

CSS के प्रकार

इनलाइन CSS: सीधे एलिमेंट पर style एट्रिब्यूट के माध्यम से लागू किया जाता है।
आंतरिक CSS: <style> टैग में परिभाषित किया जाता है।
बाहरी CSS: .css फ़ाइल में संग्रहित किया जाता है और <link> के माध्यम से जोड़ा जाता है।

CSS सिंटैक्स

selector {
    property: value;
}

उदाहरण:

body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
}

सामान्य CSS गुण

color: टेक्स्ट का रंग सेट करता है।
background-color: बैकग्राउंड का रंग निर्धारित करता है।
font-size: फॉन्ट का आकार बदलता है।
margin और padding: एलिमेंट्स के चारों ओर स्पेसिंग नियंत्रित करता है।
border: एलिमेंट्स के चारों ओर बॉर्डर सेट करता है।
display: एलिमेंट की विजिबिलिटी नियंत्रित करता है (block, inline, flex, आदि)।

CSS लेआउट तकनीकें

बॉक्स मॉडल: मार्जिन, बॉर्डर, पैडिंग, और कंटेंट।
फ्लेक्सबॉक्स: display: flex; का उपयोग करके लेआउट नियंत्रण।
ग्रिड लेआउट: display: grid; के माध्यम से एडवांस्ड लेआउट सिस्टम।

JavaScript

JavaScript क्या है?

JavaScript एक प्रोग्रामिंग भाषा है जो वेब पेज में इंटरेक्टिविटी और डायनामिक व्यवहार जोड़ती है।

JavaScript सिंटैक्स

JavaScript को <script> टैग के अंदर या .js फ़ाइल में लिखा जाता है। उदाहरण:

<script>
    alert("नमस्ते, विश्व!");
</script>

वेरिएबल्स और डेटा टाइप्स

let name = "राम";  // स्ट्रिंग
let age = 25;        // नंबर
let isStudent = true; // बूलियन

JavaScript में फ़ंक्शन्स

function greet() {
    alert("वेब विकास में आपका स्वागत है!");
}
greet();

DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) मैनिपुलेशन

DOM का उपयोग JavaScript द्वारा HTML तत्वों के साथ इंटरैक्ट करने और उन्हें संशोधित करने के लिए किया जाता है। उदाहरण:

document.getElementById("demo").innerHTML = "नमस्ते, JavaScript!";

इवेंट हैंडलिंग

JavaScript उपयोगकर्ता क्रियाओं जैसे क्लिक और कीप्रेस का जवाब दे सकता है।

document.getElementById("btn").addEventListener("click", function() {
    alert("बटन पर क्लिक किया गया!");
});

मेरी वेबसाइट में आपका स्वागत है

एक साथ सब कुछ जोड़ना

HTML, CSS, और JavaScript का उपयोग करके एक साधारण वेब पेज

<!DOCTYPE html>
<html>
<head>
    <title>इंटरेक्टिव वेब पेज</title>
    <style>
        body { text-align: center; font-family: Arial, sans-serif; }
        button { padding: 10px; font-size: 16px; }
    </style>
</head>
<body>
    <h1>मेरी वेबसाइट में आपका स्वागत है</h1>
    <p id="message">बटन पर क्लिक करें और जादू देखें!</p>
    <button id="btn">क्लिक करें</button>
    <script>
        document.getElementById("btn").addEventListener("click", function() {
            document.getElementById("message").innerHTML = "आपने बटन पर क्लिक किया!";
        });
    </script>
</body>
</html>

Learn More Here