HTML (Hyper Text Markup Language) is the most widely used language for developing web pages. It was created by Tim Berners-Lee in 1991, and the first standard HTML specification, HTML 2.0, was published in 1995. The HTML 4.01 version, released in 1999, was a major update. Currently, HTML5 (published in 2012) is the latest version, which is an extension of HTML 4.01.

HTML (Hyper Text Markup Language) एक ऐसी भाषा है जिसका उपयोग Web Page बनाने के लिए किया जाता है। इसे 1991 में Tim Berners-Lee द्वारा विकसित किया गया था, और 1995 में HTML 2.0 पहला स्टैण्डर्ड HTML संस्करण प्रकाशित हुआ था। HTML 4.01 संस्करण 1999 में प्रकाशित हुआ था, जो एक महत्वपूर्ण Version था। वर्तमान में HTML 5 (जो 2012 में प्रकाशित हुआ) सबसे नया संस्करण है, जो HTML 4.01 का विस्तार है।

HTML एक Markup Language है, जिसका उपयोग Web Document (Web Page) बनाने के लिए किया जाता है। HTML एक बहुत ही सरल कोडिंग भाषा है और यह Web Pages का आधार है। HTML Tags का उपयोग करके Web Pages को Create करता है। ये tags, web page के विभिन्न भागों जैसे Headings, Paragraphs और Tables को परिभाषित करते हैं।

HTML वेब पर जानकारी को सुंदर और आकर्षक तरीके से प्रस्तुत करने का एक माध्यम है। Tim Berners-Lee ने 1991 में HTML को बनाया था।

Basic HTML Tools

HTML Editors

एक HTML Editor एक प्रोग्राम है जिसका उपयोग HTML कोड लिखने के लिए किया जाता है, जिससे आप सरल या जटिल वेब पेज बना सकते हैं। बहुत से Editors उपलब्ध हैं, लेकिन Notepad सबसे सरल और Windows के सभी संस्करणों में उपलब्ध है। हालांकि, Notepad बड़े और जटिल वेब पेजों के लिए उपयुक्त नहीं है, इसलिए अधिक उन्नत HTML Editors जैसे Notepad++, Sublime Text, और VS Code का उपयोग बेहतर अनुभव के लिए किया जाता है।

Web Browsers

HTML कोड के परिणाम को देखने के लिए एक Web Browser की आवश्यकता होती है, क्योंकि ब्राउज़र HTML कोड को आसानी से समझता है। जब आप HTML Editor में कोड लिखते हैं, तो उसे .html एक्सटेंशन के साथ सेव करें और फिर उसे वेब ब्राउज़र में खोलें। इसके बाद, आप अपना कोड वेब पेज के रूप में देख सकते हैं। ब्राउज़र HTML कोड को पढ़कर उसे वेब पेज के रूप में प्रदर्शित करता है।

HTML Terminology

1. Tag:

Tag वह टेक्स्ट है जो < > (एंगल ब्रैकेट्स) के अंदर होता है और जिसे Web Browser पहचानता है। हर tag का अपना मतलब होता है, जो browser को बताता है कि उसे content के साथ क्या करना है। उदाहरण के लिए, <b> tag browser को बताता है कि उसे text को bold करना है।

Example: <p>This is My <b>Computer.</b> है।</p>

Result: This is My Computer.

· Tag हमेशा angle bracket <tag>...</tag> के अंदर होते हैं।

· Tag दो प्रकार के होते हैं: Container Tags और Empty Tags।

Container Tag:

एक Container Tag में एक opening tag <tag> और एक closing tag </tag> होता है। ये tag Contents को contain करते हैं।

Example: This is My <u>Pen</u>

Result: This is My Pen

Container tags को Pair tags या On-Off tags भी कहा जाता है, क्योंकि इनमें दोनों tag (opening और closing) होते हैं।

Empty Tag:

एक Empty Tag के पास Closing tag नहीं होता है, और ये किसी भी Content को Contain नहीं करते हैं। ये tag अपने आप close होते हैं।

Example: <p> This is My Pen <br> That is your Dog. </p>

Result: This is My Pen

That is your Dog.

Empty tags को Singular tags या Stand-alone tags भी कहा जाता है क्योंकि इनमें Closing Tag नहीं होता है।

2. Attribute:

Attribute एक HTML टैग की प्रॉपर्टी होती है, जो ओपनिंग टैग के अंदर निर्धारित की जाती है। यह टैग के बारे में अतिरिक्त जानकारी प्रदान करती है, जैसे रंग, आकार, नाम, या फॉन्ट शैली। कुछ सामान्य attributes होते हैं जैसे src (source), height, width, और color।

Example: <img src="image.jpg" alt="an image" width="500 px" height="600 px">

3. Element:

Element किसी document की संरचना का main part होता है, जैसे कि एक title, paragraph, या list. इसमें एक opening tag, Content और एक closing tag शामिल होता है।

Example: <p>This is a Paragraph.</p>

<HTML>

<Head>

<Title> New Document </Title>

</Head>

<Body>

Hello! This is my new HTML File.<br>

………………………………………………………

</Body>

</HTML>

HTML Tags

<HTML> TAG:

यह tag, HTML document के सबसे ऊपर के elements को परिभाषित करता है, जिससे इसे HTML document के रूप में पहचाना जा सकता है। यह एक container tag है, जिसमें एक start और एक end tag होता है, और इसके अंदर सभी अन्य tag और text nasted होते हैं।

Syntax:

<HTML>

..........

</HTML>

<HEAD> TAG:

यह tag आपके HTML फाइल के बारे में जानकारी प्रदान करता है। इसमें अन्य tags भी हो सकते हैं, जो आपके HTML document को बाहरी दुनिया से पहचान दिलाने में मदद करते हैं। Head tag, HTML tag के अंदर nasted होता है।

Syntax:

<HTML>

<HEAD>

..........

</HEAD>

</HTML>

Head tag एक container के रूप में कार्य करता है, जो अपनी अंदर की metadata (data about data) को संभालता है। यह metadata <html> और <body> के बीच रखा जाता है।

<TITLE> TAG:

यह tag, head tag के अंदर nasted होता है। इसका उद्देश्य आपके page को अन्य लोगों से पहचान दिलाना है। इस tag का output browser के title bar पर प्रदर्शित होता है, लेकिन यह page के हिस्से के रूप में दिखाई नहीं देता है।

Syntax:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

</html>

<BODY> TAG:

Body tag head tag का पूरक होता है और इसमें सभी वो tags होते हैं जिन्हें browser आपके HTML, document के content के रूप में प्रदर्शित करता है। दोनों, head और body tags, HTML tag के अंदर nasted होते हैं। Body tag, head tag के बाद आता है और HTML document के एक अलग भाग को दर्शाता है।

Syntax:

<HTML>

<HEAD>

<TITLE>MY FIRST WEB PAGE</TITLE>

</HEAD>

<BODY>

<p> This is my first file. </p>

</BODY>

</HTML>

Formate of an HTML File

<html>

<head>

<title> Page Title here… </title>

</head>

<body>

<p> Text which you want to write in page </p>

</body>

</html>

HTML Document बनाने के लिए Basic Steps

1. सबसे पहले, Notepad या किसी भी text editor को खोलें।

2. इसमें अपना HTML कोड लिखें।

3. HTML document को किसी नाम से Save करें।

4. ध्यान रखें कि ".html" extension होना चाहिए और नाम में कोई space नहीं हो। (Example: File1.html)

5. अब किसी web browser जैसे Internet Explorer या Google Chrome को खोलें।

6. Ctrl + O दबाकर HTML file को खोलें।

7. उस folder में जाएं जहाँ आपने html file को save किया है और उसे select करें।

8. Open पर क्लिक करें ताकि आप अपनी HTML file का result देख सकें।

Some Important Tags of HTML

1. Heading Tags : HTML में छह प्रकार के heading tags होते हैं, <h1> से लेकर <h6> तक, जो webpage पर हेडिंग्स की Structure और sequence को निर्धारित करने के लिए प्रयोग किए जाते हैं। ये tags, Content को व्यवस्थित करने, accessiblity सुधारने और SEO (Search Engine Optimization) के लिए महत्वपूर्ण होते हैं।

<h1> Tag : The <h1> is the highest level heading tag, which displays the most important heading on a webpage.

Syntax: <h1>This is the main heading</h1>

Example: <h1>Welcome to My Website</h1>

<h2> Tag : The <h2> is the second level heading tag, which comes under the <h1> tag. It is used for subheadings of the main content.

Syntax: <h2>This is a subheading</h2>

Example: <h2>About Us</h2>

<h3> Tag : The <h3> is the third level heading tag, which comes under the <h2> tag. It is used for further subdivision of content.

Syntax: <h3>This is a subsection heading</h3>

Example: <h3>Our History</h3>

<h4> Tag : The <h4> is the fourth level heading tag, which comes under the <h3> tag. It is used to organize smaller parts of the content.

Syntax: <h4>This is a detailed subheading</h4>

Example: <h4>Milestones in Our Journey</h4>

<h5> Tag : The <h5> is the fifth level heading tag, which comes under the <h4> tag. It is used for even more specific content breakdowns.

Syntax: <h5>This is a smaller subheading</h5>

Example: <h5>About Our Partners</h5>

<h6> Tag : The <h6> is the sixth level heading tag, which is the lowest level heading tag in HTML. It is used for the smallest and most specific sections.

Syntax: <h6>This is the smallest subheading</h6>

Example: <h6>Important Notes</h6>

2. Pragraph and other tags

HTML में font और paragraph को format करने के लिए विभिन्न tags का उपयोग किया जाता है। ये tags text को style, align और organize करने में मदद करते हैं।

1. <p> Tag (Paragraph Tag) : Paragraphs बनाने के लिए उपयोग किया जाता है।

Syntax: <p>Content goes here...</p>

Example: <p>This is a paragraph.</p>

align Attribute : Paragraph को left, right, center, या justify alignment देने के लिए।

Syntax: <p align="left">Left-aligned text.</p>

Example: <p align="left">This is left-aligned text.</p>

<p align="center">This is center-aligned text.</p>

<p align="right">This is right-aligned text.</p>

<p align="justify">This is justified text.</p>

2. <br> Tag (Line Break) : नई लाइन में जाने के लिए उपयोग किया जाता है।

Syntax: <p>Line 1 <br> Line 2</p>

Example: <p>Hello! This is first line<br>this is second line </p>

3. <b> Tag (Bold Text): Text को bold करने के लिए उपयोग किया जाता है।

Syntax: <b>Bold text</b>

Example: <p>This text <b>is bold.</b></p>

4. <i> Tag (Italic Text) : Text को italic format में दिखाने के लिए।

Syntax: <i>Italic text</i>

Example: <i>This text is italic.</i>

5. <u> Tag (Underline Text) : Text को underline करने के लिए।

Syntax: <u>Underlined text</u>

Example: <u>This text is underlined.</u>

6. <small> Tag (Smaller Text) : Text को smaller size में दिखाने के लिए।

Syntax: <small>Small text</small>

Example: <small>This text is smaller.</small>

7. <mark> Tag (Highlighted Text) : Text को highlight करने के लिए।

Syntax: <mark>Highlighted text</mark>

Example: <mark>This text is highlighted.</mark>

8. <sup> Tag (Superscript Text) : Text को ऊपर (superscript) दिखाने के लिए।

Syntax: x<sup>2</sup>

Example: 5<sup>th</sup> Edition

9. <sub> Tag (Subscript Text) : Text को नीचे (subscript) दिखाने के लिए।

Syntax: H<sub>2</sub>O

Example: Chemical formula: H<sub>2</sub>O

10. <font> Tag (Deprecated) : Text का size, color और face define करने के लिए (HTML5 में deprecated)।

Syntax: <font size="size" color="color name" face="font_name">Formatted text</font>

Example: <font size="4" color="red" face=”Arial”>This is formatted text.</font>

11. <blockquote> Tag : Paragraph को blockquote style में दिखाने के लिए।

Syntax: <blockquote>Quoted text here...</blockquote>

Example: <blockquote>This is a blockquote.</blockquote>

12. <hr> Tag (Horizontal Rule) : Page में horizontal line add करने के लिए।

Syntax: <hr>

Example: Content above<hr>Content below

13. <pre> Tag (Preformatted Text) : Text को as-it-is format में दिखाने के लिए।

Syntax: <pre>

Line 1

Line 2

</pre>

Example: <pre>

Roll Name Address

1001 Akash Chapra

1002 Vijay Siwan

</pre>

Example for Practice

<html>

<head>

</head>

<body>

<h1>Computer</h1>

<h2>What is Computer?</h2>

<hr>

<p>A <b>computer</b> is a machine that can store and process information.<br> Most computers rely on a <b>binary system</b>, which uses two variables,<br> 0 and 1, to complete tasks such as <i>storing data, calculating <br>algorithms, and displaying information.</i></br></p>

<h3>Where Computer use for....</h3>

<hr>

<p>Computer are used to making Notes, Sotre Data, write chemical equations <br>like - H<sub>2</sub>SO<sub>4</sub> and Mathematical formulas like - (a+b)<sup>2</sup>.</p>

<pre>

<h3>There are four generation of computer</h3>

<b>Generation Time-period Technology</b>

1st Gen. 1940 - 1956 Vaccume Tube

2nd Gen. 1956 - 1963 Transistor

3rd Gen. 1964 - 1971 IC cheap

4th Gen. 1971 - Present Micro Processor

</pre>

</body>

</html>

HTML में <FONT> Tag और संबंधित Attributes

HTML में <FONT> tag का उपयोग font style, size, और color जैसे text के characteristics को बदलने के लिए किया जाता है। हालांकि, यह tag HTML5 में deprecated हो चुका है, लेकिन यह पुराने HTML versions में अभी भी उपयोगी है।

1. <FONT> Tag और Attributes

a) FACE Attribute : Font style (जैसे Arial, Comic Sans MS) को बदलने के लिए।

Syntax: <FONT FACE="Font Name">Text Content</FONT>

Example: <FONT FACE="Comic Sans MS">Welcome to HTML!</FONT>

b) SIZE Attribute : Font size को 1 (smallest) से 7 (largest) के बीच सेट करने के लिए।

Syntax: <FONT SIZE="Size Number">Text Content</FONT>

Example: <FONT SIZE="4">This is size 4 text.</FONT>

c) COLOR Attribute : Text के font का color बदलने के लिए।

Syntax: <FONT COLOR="Color Name or Code">Text Content</FONT>

Example: <FONT COLOR="RED">This is red-colored text.</FONT>

2. Background और Text Formatting

a) Background Color : Webpage के background का color बदलने के लिए।

Syntax: <BODY BGCOLOR="Color Name">

Example: <BODY BGCOLOR="YELLOW">

<p>This page has a yellow background.</p>

</BODY>

b) Background Image : Webpage के background में image लगाने के लिए।

Syntax: <BODY BACKGROUND="Image Path">

Example: <BODY BACKGROUND="C:\Users\Desktop\sky.jpg">

<p> This page has a background image.</p>

</BODY>

💡 Image Path Note: Image का location path properties > security tab से copy करें।

3. Practical Example: Combining All Features

<HTML>

<HEAD>

<TITLE>Font and Background Example</TITLE>

</HEAD>

<H2 ALIGN="CENTER"><FONT COLOR="WHITE">Welcome to Wizard-Tech Academy</FONT></H2>

- Fundamentals<br>

- MS-DOS<br>

- Windows 98<br>

- Word 2000<br>

- Excel 2000<br>

</FONT>

</CENTER>

<FONT COLOR="Blue">WELCOME to Wizard-Tech Computer Academy</FONT><BR>

</BODY>

</HTML>

HTML में Lists और उनके उपयोग

HTML में Lists का उपयोग information को एक व्यवस्थित (ordered) या अनियोजित (unordered) रूप में प्रदर्शित करने के लिए किया जाता है। Lists webpage को well-organized और पढ़ने में आसान बनाती हैं।

1. Ordered List (<OL> Tag)

Ordered List एक sequentially numbered list है। यह numbers (जैसे 1, 2, 3) या alphabets (जैसे a, b, c) के रूप में items को क्रम में दिखाती है।

Syntax:

</OL>

Type Attribute:

a → Lowercase letters (a, b, c...)
A → Uppercase letters (A, B, C...)
i → Lowercase Roman numerals (i, ii, iii...)
I → Uppercase Roman numerals (I, II, III...)

Example:

<HTML>

<HEAD>

<TITLE>Ordered List Example</TITLE>

</HEAD>

<BODY>

<h2>ADCA Course Syllabus</h2>

<OL type="a">

<LI>COMPUTER FUNDAMENTAL</LI>

<LI>WINDOWS 10</LI>

</OL>

</BODY>

</HTML>

2. Unordered List (<UL> Tag)

Unordered List items को bullets (जैसे disc, circle, square) के साथ दिखाती है।

Syntax:

</UL>

Type Attribute:

disc → Filled circle (default)
circle → Hollow circle
square → Square bullets

Example:

<HTML>

<HEAD>

<TITLE>Ordered List Example</TITLE>

</HEAD>

<BODY>

<h2>ADCA Course Syllabus</h2>

<UL type="square">

<LI>COMPUTER FUNDAMENTAL</LI>

<LI>WINDOWS 10</LI>

</UL>

</BODY>

</HTML>

3. Nested Lists

HTML में एक List को दूसरी List के अंदर nest (अंदर रखना) किया जा सकता है। Browser nested lists को अपने-आप indent कर देता है।

Example:

<HTML>

<HEAD>

<TITLE>Nested List Example</TITLE>

</HEAD>

<BODY>

<h3>Parts of Computer</h3>

<LI>SOFTWARE</LI>

<LI>COMPUTER FUNDAMENTAL</LI>

<LI>WINDOWS 10</LI>

<LI>EXCEL 2010</LI>

<LI>ACCESS 2010</LI>

</OL>

<LI>HARDWARE</LI>

<LI>MONITOR</LI>

<LI>PRINTER</LI>

<LI>MODEM</LI>

<LI>MOUSE</LI>

</OL>

</UL>

</BODY>

</HTML>

4. Definition List (<DL> Tag)

Definition List items को term (<DT>) और उसकी definition (<DD>) के साथ प्रदर्शित करता है। इसे glossary या items की सूची के लिए उपयोग किया जाता है।

Syntax:

<DL>

<DD>Definition of Term 1</DD>

<DD>Definition of Term 2</DD>

</DL>

Example:

<HTML>

<HEAD>

<TITLE>Definition List Example</TITLE>

</HEAD>

<BODY>

<H3>DEFINITIONS</H3>

<DL>

<DT>HARDWARE</DT>

<DD>HARDWARE DEVICES ARE MOUSE, KEYBOARD,

MONITOR, PRINTER ETC.</DD>

<DT>SOFTWARE</DT>

<DD>SOFTWARE IS A SET OF PROGRAMS.</DD>

<DT>PERIPHERALS</DT>

<DD>EQUIPMENTS CONNECTED AROUND THE CPU.</DD>

</DL>

</BODY>

</HTML>

HTML में Hypertext Links और Marquee Tag का उपयोग

HTML में Hypertext Links और Marquee Tags का उपयोग webpages को अधिक इंटरएक्टिव और नेविगेशनल बनाने के लिए किया जाता है।

1. Creating Hypertext Links

Hypertext Links का उपयोग विभिन्न प्रकार के tasks जैसे कि दूसरे webpage पर जाना, email भेजना, image दिखाना, file डाउनलोड करना आदि के लिए किया जाता है।

<A> (Anchor) Tag

Hypertext link तीन भागों से मिलकर बना होता है:

1. Start और End Tag → लिंक को define करता है।

2. Link Target → उस webpage या file का address, जहां जाना है।

3. Link Text → वो text जिसे clickable बनाया जाता है।

Links to Other HTML Documents

Example - 1 (main.html)

<HTML>

<HEAD>

<TITLE>Wizard-Tech Computer Academy</TITLE>

</HEAD>

<BODY>

<H1>Welcome to Wizard-Tech Computer Academy</H1>

<A HREF=" https://www.facebook.com/wizardpage">Follow us on Facebook</A><BR>

<A HREF="www.wtca.edu.in">Visit to our Website</A><BR>

<A HREF="Broucer.pdf">Download our broucher</A><BR>

</BODY>

</HTML>

2. Marquee Tag

Marquee Tag का उपयोग webpage पर text या images को scrolling effect देने के लिए किया जाता है।
By default, यह right-to-left scroll करता है।

Syntax of Marquee Tag

<MARQUEE BEHAVIOR="MOTION_TYPE" DIRECTION="SCROLL_DIRECTION" HEIGHT="PIXELS"

WIDTH="PIXELS"BGCOLOR="COLOR" LOOP="NUMBER"> Text or Image </MARQUEE>

Attributes of Marquee Tag

Attribute	Description
BEHAVIOR	Motion type (values: SCROLL, SLIDE, ALTERNATE)
BGCOLOR	Background color for the marquee box
DIRECTION	Scrolling direction (values: LEFT, RIGHT, UP, DOWN)
HEIGHT, WIDTH	Set the height and width of the marquee box
LOOP	Number of times the text/image will scroll. Use -1 for infinite scrolling
SCROLLDELAY	Adjusts scrolling speed (in milliseconds)

Example - Marquee Usage

<HTML>

<HEAD>

<TITLE>Marquee Example</TITLE>

</HEAD>

<BODY>

<FONT COLOR="YELLOW"><B>WELCOME TO WIZARD-TECH COMPUTER ACADEMY</B></FONT>

</MARQUEE>

<P><MARQUEE BEHAVIOR = "ALTERNATE" DIRECTION = "LEFT" WIDTH = "750" BGCOLOR = "BLUE"

onmouseover = this.stop() onmouseleave = this.start()>

<FONT COLOR="YELLOW"><B>WELCOME TO WIZARD-TECH COMPUTER ACADEMY</B></FONT>

</MARQUEE>

<P><MARQUEE BEHAVIOR = "ALTERNATE" DIRECTION = "UP" HEIGHT = "100" WIDTH = "100" BGCOLOR =

"BLUE">

<FONT COLOR="YELLOW"><B>WELCOME</B></FONT>

</MARQUEE>

<MARQUEE BEHAVIOR="ALTERNATE" DIRECTION="DOWN" HEIGHT="100" WIDTH="100"

BGCOLOR="YELLOW">

<FONT COLOR="BLUE"><B>WELCOME</B></FONT>

</MARQUEE>

</BODY>

</HTML>

HTML में Table और Image

Table in HTML

HTML में Table का उपयोग data को rows और columns के रूप में प्रदर्शित करने के लिए किया जाता है। Table को structure देने के लिए HTML में कुछ specific tags उपलब्ध हैं।

Table Tags और उनका उपयोग

<table> Tag : यह tag एक नई table को create करने के लिए उपयोग किया जाता है। यह एक container tag है और सभी अन्य table elements को encapsulate करता है।

Syntax: <table> ………… </table>

<tr> Tag : Table rows को define करने के लिए उपयोग किया जाता है। यह भी एक container tag है।
Syntax: <tr> ………… </tr>

<th> Tag : Table headings को define करने के लिए उपयोग किया जाता है। यह <tr> के अंदर उपयोग होता है।
Syntax: <tr> <th>Heading 1</th> </tr>

<td> Tag : Table data या cells को define करने के लिए उपयोग किया जाता है। यह <tr> के अंदर आता है।
Syntax: <tr> <td>Data 1</td> </tr>

Table बनाने का Example

<HTML>

<HEAD>

<TITLE>STUDENTS DATA</TITLE>

</HEAD>

<BODY>

<TR>

<TH>Address</TH>

<TH>Mobile No.</TH>

</TR>

<TR>

<TD>Amit Anand</TD>

<TD>Chapra</TD>

</TR>

<TR>

<TD>Rahul Kumar</TD>

<TD>Patna</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Image in HTML

HTML में Image को insert करने के लिए <img> tag का उपयोग किया जाता है। यह एक empty tag है, जिसका मतलब है कि इसे close करने की आवश्यकता नहीं है।

Image Attributes और उनका उपयोग

src: यह image का source (file path) define करता है।

Syntax: <img src="file path">\

height और width: यह image की height और width set करने के लिए उपयोग किया जाता है।

Syntax: <img src="file path" height="50%" width="50%">

Image जोड़ने का Example

<HTML>

<HEAD>

<TITLE>Image File</TITLE>

</HEAD>

<BODY>

<H1>This is an image of flower</H1>

<img src="C:\Windows\Web\Wallpaper\Theme2\img7.jpg"

height="50%" width="50%">

</BODY>

</HTML>

HTML में Form

Form in HTML

HTML में Form का उपयोग data को collect करने और server पर भेजने के लिए किया जाता है। इसे login, enquiry, admission आदि के लिए बनाया जा सकता है।

Form Tags और उनका उपयोग

<form> Tag : यह tag form बनाने की शुरुआत के लिए उपयोग होता है। यह एक container tag है, जिसमें अन्य form elements (जैसे input, button) शामिल होते हैं।

Syntax: <form> ………… </form>

<input> Tag : Input tag का उपयोग user से data लेने के लिए किया जाता है। यह विभिन्न प्रकार के input boxes प्रदान करता है।

Syntax: <input type="type">

Input Types और उनका उपयोग

Input Type	Description	Example Code
text	Text box के लिए उपयोग होता है।	<input type="text">
password	Password field के लिए उपयोग होता है।	<input type="password">
date	Calendar के लिए उपयोग होता है।	<input type="date">
email	Email address input field के लिए।	<input type="email">
button	Normal button create करता है।	<input type="button">
submit	Form को submit करने के लिए।	<input type="submit">
number	केवल numbers input के लिए।	<input type="number">
radio	Radio button के लिए।	<input type="radio" name="gender">
checkbox	Checkbox के लिए।	<input type="checkbox">

Form बनाने का Example

<HTML>

<HEAD>

<TITLE>ENQUERY FORM</TITLE>

</HEAD>

<BODY>

<FORM>

<H1>STUDENT’S ENQUERY FORM</H1> <HR>

<H4>ENTER YOUR NAME <FONT COLOR=RED>*</FONT>:

</H4>

<H4>ENTER YOUR FATHER'S NAME <FONT COLOR=RED>*</FONT>:

</H4>

<H4>CHOOSE DATE OF BIRTH <FONT COLOR=RED>*</FONT>:

</H4>

<H4>ENTER YOUR EMAIL ADDRESS <FONT COLOR=RED>*</FONT>:

</H4>

<H4>CHOOSE YOUR GENDER <FONT COLOR=RED>*</FONT>:

<INPUT TYPE="RADIO" NAME="R1"> MALE

<INPUT TYPE="RADIO" NAME="R1"> FEMALE

</H4>

<H4>CHOOSE COURSE NAME <FONT COLOR=RED>*</FONT>: </H4>

<TABLE>

<TR>

</TR>

<TR>

</TR>

</TABLE>

<HR>

<HR>

</FORM>

</BODY>

</HTML>

Explanation of Example

1. Mandatory Fields: * चिन्ह से यह दर्शाया गया है कि field को भरना आवश्यक है।

2. Gender Selection:

o Radio buttons का उपयोग male/female में से एक चुनने के लिए किया गया है।

o name attribute से यह सुनिश्चित होता है कि केवल एक option चुना जा सकता है।

3. Course Selection:

o Checkbox का उपयोग multiple courses चुनने के लिए किया गया है।

4. Buttons:

o Submit: Form data को server पर भेजता है।

o Reset: Form को clear करता है।

Cancel: Button के लिए custom functionality दी जा सकती है।