Unit 4 in 30 seconds: The Internet is a global network of networks (born as ARPANET, 1969); the WWW is a service running on it. Browsers display web pages; search engines find them. E-mail uses addresses like user@domain, with CC/BCC fields and SMTP/POP3/IMAP protocols. HTML (HyperText Markup Language) builds web pages with tags: document structure (doctype, html, head, body), formatting tags (b, i, u, headings), lists, links, images, tables (table/tr/td/th), forms (input types), frames, and CSS style sheets (inline, internal, external).
1. Internet: Concept and History
The Internet is a global network of interconnected computer networks that communicate using a common set of rules called TCP/IP (Transmission Control Protocol / Internet Protocol). It connects millions of computers worldwide.
The Internet began as ARPANET in 1969, a project of the US Department of Defense (ARPA).
The World Wide Web (WWW) was invented by Tim Berners-Lee in 1989 at CERN.
Internet services include e-mail, WWW, file transfer (FTP), online chat and video conferencing.
Internet vs WWW
Point
Internet
World Wide Web (WWW)
Meaning
Global network of networks (hardware + protocols)
A service running on the Internet (web pages)
Invented
ARPANET, 1969
Tim Berners-Lee, 1989
Accessed via
IP addresses, cables, routers
Web browsers using URLs and HTTP/HTTPS
Analogy
The road network
Cars running on those roads
PYQ Alert: "Who is the father of the World Wide Web?" — Tim Berners-Lee. "ARPANET was developed in which year?" — 1969. "TCP/IP stands for?" — Transmission Control Protocol / Internet Protocol.
2. Web Browsers and Search Engines
Web browser
A web browser is software used to access and display web pages on the WWW. Examples: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari. The first graphical browser was Mosaic (1993).
Search engine
A search engine is a website that helps users find information on the Internet. Examples: Google, Bing, Yahoo, DuckDuckGo. It crawls web pages, indexes them, and shows results for keywords.
Browser vs Search Engine: a browser is software installed on your device that opens pages; a search engine is a website opened inside a browser that searches the web. Chrome = browser, Google = search engine.
3. E-mail Services
E-mail (electronic mail) is the exchange of messages over the Internet. It is fast, cheap and works store-and-forward (the receiver need not be online).
Parts of an e-mail address
Example: student@gmail.com
Username (student) — the account name, before the @ symbol.
@ — separator, read as "at".
Domain name (gmail.com) — the mail server/provider.
Fields of an e-mail
To: main recipient(s).
CC (Carbon Copy): recipients who get a copy; all addresses are visible to everyone.
BCC (Blind Carbon Copy): recipients get a copy but their addresses stay hidden from others.
Subject: the topic/heading of the mail.
Attachment: files (documents, images) sent along with the mail.
E-mail protocols
Protocol
Full form
Used for
SMTP
Simple Mail Transfer Protocol
Sending e-mails
POP3
Post Office Protocol v3
Receiving e-mails (downloads to device)
IMAP
Internet Message Access Protocol
Receiving e-mails (reads on server, syncs devices)
Exam tip: Remember as S = Send (SMTP), P/I = Pull/Read (POP3/IMAP). CC vs BCC difference is a classic 2-mark question: CC addresses are visible, BCC addresses are hidden.
4. HTML: Introduction
HTML stands for HyperText Markup Language. It is the standard language used to create web pages. HTML is not a programming language — it is a markup language: it describes the structure of a page using tags.
HyperText = text with links that jump to other pages.
Markup = instructions (tags) that tell the browser how to display content.
5. Types of HTML Documents
Static HTML documents: fixed content; the same page is shown to every visitor (plain .html files).
Dynamic HTML documents: content changes — generated on the server or updated in the browser (using scripts, forms, databases).
6. Document Structure: Element, Tags, Attributes
Basic structure of an HTML document
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first web page.</p>
</body>
</html>
<!DOCTYPE html> — declares the document is HTML5.
<html> — root element of the page.
<head> — contains page information: <title> (shown on the browser tab).
<body> — contains everything visible on the page.
Tag vs Element vs Attribute
Term
Meaning
Example
Tag
The markup keyword in angle brackets
<p>, </p>
Element
Opening tag + content + closing tag
<p>Hello</p>
Attribute
Extra information inside the opening tag
<img src="pic.jpg"> — src is the attribute
PYQ Alert: "HTML stands for?" — HyperText Markup Language. "Which tag is used for the largest heading?" — <h1>. "Which attribute specifies the image source?" — src.
7. Character Formatting Tags
Tag
Effect
Example output
<b>
Bold
Bold text
<i>
Italic
Italic text
<u>
Underline
Underlined text
<h1> to <h6>
Headings, h1 largest
Heading 1 … Heading 6
<p>
Paragraph
—
<br>
Line break (empty tag, no closing)
—
<hr>
Horizontal line
—
8. Lists, Links and Images
Lists
Ordered list (<ol>) — numbered items with <li>.
Unordered list (<ul>) — bulleted items with <li>.
Links
Links are created with the anchor tag <a> using the href attribute:
Images are inserted with the <img> tag (empty tag) using src (source) and alt (alternate text):
<img src="photo.jpg" alt="My photo" width="200">
Fig 4.1 — Anatomy of an HTML element: opening tag, attribute, content, closing tag
9. Tables in HTML
Tables are built with <table>, rows with <tr> (table row), headings with <th> (table heading) and data cells with <td> (table data). border attribute draws the grid lines.
Table tags to memorise:<table> = whole table, <tr> = row, <th> = bold centred heading cell, <td> = normal data cell. colspan / rowspan merge cells across columns / rows.
10. Forms in HTML
Forms collect input from users (login pages, registration, search boxes). The <form> tag contains input controls made with <input>, whose type attribute decides the control:
Input type
Creates
type="text"
Single-line text box
type="password"
Password box (hides characters)
type="radio"
Radio button (choose one)
type="checkbox"
Check box (choose many)
type="submit"
Submit button
type="reset"
Reset button
Other form tags: <textarea> (multi-line text), <select> with <option> (drop-down list).
11. Frames (brief)
Frames divide the browser window into multiple sections, each showing a different page. They use the <frameset> tag (replacing <body>) with <frame> tags pointing to pages via src. Frames are now obsolete in HTML5 — replaced by CSS layouts and <iframe>.
12. Style Sheets (CSS)
CSS (Cascading Style Sheets) controls the look of a web page — colours, fonts, sizes, layout — while HTML handles the structure. There are three ways to apply CSS:
Type
Where written
Example
Inline
Inside a tag's style attribute
<p style="color:red;">
Internal
Inside <style> in the <head>
Applies to one page
External
Separate .css file linked with <link>
Applies to many pages
Priority order (which wins when all three style the same element): Inline > Internal > External.
Exam tip: "CSS stands for?" — Cascading Style Sheets. HTML = structure, CSS = presentation. The <link> tag connects an external stylesheet; its extension is .css.
Quick revision — Unit 4: Internet = network of networks, TCP/IP, ARPANET 1969. WWW = service on Internet, Tim Berners-Lee 1989. Browser (Chrome) vs Search engine (Google). E-mail: user@domain; CC visible, BCC hidden; SMTP sends, POP3/IMAP receive. HTML = HyperText Markup Language. Tags: b, i, u, h1–h6, p, br, hr, ol/ul/li, a href, img src+alt. Table: table/tr/th/td. Form: input types text/password/radio/checkbox/submit/reset. Frames: frameset, obsolete in HTML5. CSS: inline > internal > external.
30 सेकंड में इकाई 4: इंटरनेट नेटवर्कों का वैश्विक नेटवर्क है (ARPANET, 1969 से जन्मा); WWW इस पर चलने वाली एक सेवा है। ब्राउज़र वेब पेज दिखाते हैं; सर्च इंजन उन्हें खोजते हैं। ई-मेल में user@domain जैसा पता होता है, CC/BCC फील्ड और SMTP/POP3/IMAP प्रोटोकॉल होते हैं। HTML (HyperText Markup Language) टैगों से वेब पेज बनाता है: दस्तावेज़ संरचना (doctype, html, head, body), फॉर्मेटिंग टैग (b, i, u, headings), सूचियाँ, लिंक, इमेज, टेबल (table/tr/td/th), फॉर्म (input types), फ्रेम और CSS स्टाइल शीट (inline, internal, external)।
1. इंटरनेट: अवधारणा और इतिहास
इंटरनेट परस्पर जुड़े कंप्यूटर नेटवर्कों का एक वैश्विक नेटवर्क है जो TCP/IP (Transmission Control Protocol / Internet Protocol) नामक नियमों के समान सेट से संवाद करते हैं। यह दुनिया भर के लाखों कंप्यूटरों को जोड़ता है।
इंटरनेट की शुरुआत ARPANET के रूप में 1969 में हुई थी, यह अमेरिकी रक्षा विभाग (ARPA) की परियोजना थी।
वर्ल्ड वाइड वेब (WWW) का आविष्कार Tim Berners-Lee ने 1989 में CERN में किया था।
इंटरनेट सेवाओं में ई-मेल, WWW, फाइल ट्रांसफर (FTP), ऑनलाइन चैट और वीडियो कॉन्फ्रेंसिंग शामिल हैं।
इंटरनेट बनाम WWW
बिंदु
इंटरनेट
वर्ल्ड वाइड वेब (WWW)
अर्थ
नेटवर्कों का वैश्विक नेटवर्क (हार्डवेयर + प्रोटोकॉल)
इंटरनेट पर चलने वाली एक सेवा (वेब पेज)
आविष्कार
ARPANET, 1969
Tim Berners-Lee, 1989
पहुँच
IP पते, केबल, राउटर के माध्यम से
URL और HTTP/HTTPS से वेब ब्राउज़र द्वारा
उदाहरण
सड़क नेटवर्क
उन सड़कों पर चलने वाली गाड़ियाँ
परीक्षा टिप: "वर्ल्ड वाइड वेब के जनक कौन हैं?" — Tim Berners-Lee। "ARPANET किस वर्ष विकसित हुआ?" — 1969। "TCP/IP का पूरा नाम?" — Transmission Control Protocol / Internet Protocol।
2. वेब ब्राउज़र और सर्च इंजन
वेब ब्राउज़र
वेब ब्राउज़र एक सॉफ्टवेयर है जिसका उपयोग WWW पर वेब पेज खोलने और दिखाने के लिए होता है। उदाहरण: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari। पहला ग्राफिकल ब्राउज़र Mosaic (1993) था।
सर्च इंजन
सर्च इंजन एक वेबसाइट है जो उपयोगकर्ताओं को इंटरनेट पर जानकारी खोजने में मदद करती है। उदाहरण: Google, Bing, Yahoo, DuckDuckGo। यह वेब पेजों को क्रॉल करता है, इंडेक्स बनाता है और कीवर्ड के परिणाम दिखाता है।
ब्राउज़र बनाम सर्च इंजन: ब्राउज़र आपके डिवाइस पर इंस्टॉल किया गया सॉफ्टवेयर है जो पेज खोलता है; सर्च इंजन ब्राउज़र के अंदर खुलने वाली वेबसाइट है जो वेब पर खोजती है। Chrome = ब्राउज़र, Google = सर्च इंजन।
3. ई-मेल सेवाएँ
ई-मेल (electronic mail) इंटरनेट पर संदेशों का आदान-प्रदान है। यह तेज, सस्ता है और store-and-forward तरीके से काम करता है (प्राप्तकर्ता का ऑनलाइन होना जरूरी नहीं)।
ई-मेल पते के भाग
उदाहरण: student@gmail.com
यूजरनेम (student) — @ चिह्न से पहले का अकाउंट नाम।
@ — विभाजक, "at" पढ़ा जाता है।
डोमेन नाम (gmail.com) — मेल सर्वर/प्रदाता।
ई-मेल के फील्ड
To: मुख्य प्राप्तकर्ता।
CC (Carbon Copy): प्रति पाने वाले प्राप्तकर्ता; सभी पते सभी को दिखाई देते हैं।
BCC (Blind Carbon Copy): प्राप्तकर्ता को प्रति मिलती है पर उनके पते दूसरों से छिपे रहते हैं।
Subject: मेल का विषय/शीर्षक।
Attachment: मेल के साथ भेजी गई फाइलें (दस्तावेज़, इमेज)।
ई-मेल प्रोटोकॉल
प्रोटोकॉल
पूरा नाम
उपयोग
SMTP
Simple Mail Transfer Protocol
ई-मेल भेजने के लिए
POP3
Post Office Protocol v3
ई-मेल प्राप्त करने के लिए (डिवाइस पर डाउनलोड)
IMAP
Internet Message Access Protocol
ई-मेल प्राप्त करने के लिए (सर्वर पर पढ़ता है, डिवाइस सिंक करता है)
परीक्षा टिप: याद रखें S = Send (SMTP), P/I = Pull/Read (POP3/IMAP)। CC बनाम BCC अंतर 2 अंकों का क्लासिक प्रश्न है: CC पते दिखते हैं, BCC पते छिपे रहते हैं।
4. HTML: परिचय
HTML का पूरा नाम HyperText Markup Language है। यह वेब पेज बनाने की मानक भाषा है। HTML प्रोग्रामिंग भाषा नहीं है — यह एक मार्कअप भाषा है: यह टैगों से पेज की संरचना बताती है।
HyperText = ऐसा टेक्स्ट जिसमें लिंक हों जो दूसरे पेजों पर ले जाएँ।
Markup = निर्देश (टैग) जो ब्राउज़र को बताते हैं कि सामग्री कैसे दिखानी है।
5. HTML दस्तावेज़ों के प्रकार
स्थिर (Static) HTML दस्तावेज़: निश्चित सामग्री; हर आगंतुक को वही पेज दिखता है (साधारण .html फाइलें)।
गतिशील (Dynamic) HTML दस्तावेज़: सामग्री बदलती है — सर्वर पर बनती है या ब्राउज़र में अपडेट होती है (स्क्रिप्ट, फॉर्म, डेटाबेस से)।
6. दस्तावेज़ संरचना: एलिमेंट, टैग, एट्रिब्यूट
HTML दस्तावेज़ की बुनियादी संरचना
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first web page.</p>
</body>
</html>
<!DOCTYPE html> — घोषित करता है कि दस्तावेज़ HTML5 है।
<html> — पेज का मूल एलिमेंट।
<head> — पेज की जानकारी रखता है: <title> (ब्राउज़र टैब पर दिखता है)।
<body> — पेज पर दिखने वाली सारी सामग्री रखता है।
टैग बनाम एलिमेंट बनाम एट्रिब्यूट
शब्द
अर्थ
उदाहरण
टैग
कोण कोष्ठकों में मार्कअप कीवर्ड
<p>, </p>
एलिमेंट
खुलने वाला टैग + सामग्री + बंद होने वाला टैग
<p>Hello</p>
एट्रिब्यूट
खुलने वाले टैग के अंदर अतिरिक्त जानकारी
<img src="pic.jpg"> — src एट्रिब्यूट है
परीक्षा टिप: "HTML का पूरा नाम?" — HyperText Markup Language। "सबसे बड़े शीर्षक का टैग कौन सा है?" — <h1>। "इमेज स्रोत बताने वाला एट्रिब्यूट?" — src।
7. कैरेक्टर फॉर्मेटिंग टैग
टैग
प्रभाव
उदाहरण आउटपुट
<b>
गहरा (Bold)
Bold text
<i>
तिरछा (Italic)
Italic text
<u>
रेखांकित (Underline)
Underlined text
<h1> से <h6>
शीर्षक, h1 सबसे बड़ा
Heading 1 … Heading 6
<p>
पैराग्राफ
—
<br>
लाइन ब्रेक (खाली टैग, बंद नहीं होता)
—
<hr>
क्षैतिज रेखा
—
8. सूचियाँ, लिंक और इमेज
सूचियाँ
क्रमित सूची (<ol>) — <li> से संख्याबद्ध आइटम।
अक्रमित सूची (<ul>) — <li> से बुलेट वाले आइटम।
लिंक
लिंक एंकर टैग <a> से href एट्रिब्यूट द्वारा बनाए जाते हैं:
याद रखने वाले टेबल टैग:<table> = पूरी टेबल, <tr> = पंक्ति, <th> = गहरा केंद्रित शीर्षक सेल, <td> = सामान्य डेटा सेल। colspan / rowspan सेल को कॉलम / पंक्तियों में मिलाते हैं।
10. HTML में फॉर्म
फॉर्म उपयोगकर्ताओं से इनपुट लेते हैं (लॉगिन पेज, पंजीकरण, सर्च बॉक्स)। <form> टैग में <input> से बने इनपुट कंट्रोल होते हैं, जिनका type एट्रिब्यूट कंट्रोल तय करता है:
इनपुट टाइप
बनाता है
type="text"
एक पंक्ति का टेक्स्ट बॉक्स
type="password"
पासवर्ड बॉक्स (अक्षर छिपाता है)
type="radio"
रेडियो बटन (एक चुनें)
type="checkbox"
चेक बॉक्स (कई चुनें)
type="submit"
सबमिट बटन
type="reset"
रीसेट बटन
अन्य फॉर्म टैग: <textarea> (कई पंक्तियों का टेक्स्ट), <select> के साथ <option> (ड्रॉप-डाउन सूची)।
11. फ्रेम (संक्षेप में)
फ्रेम ब्राउज़र विंडो को कई भागों में बाँटते हैं, हर भाग में अलग पेज दिखता है। इनमें <frameset> टैग (<body> की जगह) के साथ <frame> टैग होते हैं जो src से पेज बताते हैं। फ्रेम अब HTML5 में अप्रचलित (obsolete) हैं — इनकी जगह CSS लेआउट और <iframe> आ गए हैं।
12. स्टाइल शीट (CSS)
CSS (Cascading Style Sheets) वेब पेज का रूप नियंत्रित करती है — रंग, फॉन्ट, आकार, लेआउट — जबकि HTML संरचना संभालता है। CSS लगाने के तीन तरीके हैं:
प्रकार
कहाँ लिखा जाता है
उदाहरण
Inline
टैग के style एट्रिब्यूट के अंदर
<p style="color:red;">
Internal
<head> में <style> के अंदर
एक पेज पर लागू
External
अलग .css फाइल, <link> से जुड़ती है
कई पेजों पर लागू
प्राथमिकता क्रम (तीनों एक ही एलिमेंट को स्टाइल करें तो कौन जीतेगा): Inline > Internal > External।
