Learn Html Tags ,Attributes in Hindi HTML | Webpage Document Structure in Hindi

Learn Html Tags ,Attributes, Webpage Document Structure in Hindi -

HTML (Hyper Text Markup Language) एक भाषा है जिसके जरिये हम Web-Browser को समझा ते हैं कि हमारे Webpage के Information ( text, images आदि ) को User के Screen पर कैसे Display किया जाये। हमारे पेज का Layout कैसा हो गा ये भी हम HTML के Code से ही Browser को बताते हैं। बिना HTML Code के कोई भी वेबपेज Design नही किया जा सकता इस समय जिस पेज को आप अपनी Screen पर देख रहें है इसे भी बनाने के लिये HTML Language का Use किया गया है। HTML File का Extension .html हो ता है।

Tools for write HTML in your computer

HTML में Code लिखने और Run करने के लिये कुछ Basic Tools की जरूरत हो ती है जो की Computers में पहले से ही Installed हो ते हैं। इसके लिये mainly दो प्रका र के टूल्स की जरूरत पडती है: 1. Text Editor (जैसे Notepad, Notepad++, Dreamweaver, Coffee Cup आदि ) 2. Web Browser (जैसे Internet Explorer, Google Chrome, Firefox, Safari, Opera आदि ) Text Editor हम Use करेंगे Code लिखने के लिये और Browser में हम बनाये गये HTML File को Run करेंगे।

HTML Document Structure

- एक HTML Page कई सारे Tags से मिलकर बना हो ता है, और सारे tags उस पेज के कि सी न कि सी element को दर्शा ते हैं जैसे paragraph, image, table आदि ।

-लगभग सारे Tags के opening और closing होते हैं। opening tag कुछ इस तरह हो ता है: <tag_name>

और closing tag में / लगा हो ता है जैसे: </tag_nam>

- सभी Html tags के पहले <html> और सबसे अंत मे <html/> के लिखे जाते है |

- Head tags के बीच मे लिखी गयी information actual page मे दिखता [ appear ] नहीं है

<head> information like title <head/> के लिखे जाते है |

- Title tags के बीच मे लिखी गई information Web browser के title bar मे दिखता है

<title> <title /> के लिखे जाते है |

- Body tags मे वे सभी content लिखे जाते जो actual पेज पर दिखते है |

<body> contain all the visible content of the page including all images, links, etc. <body/> के लिखे जाते है |

Basic Tags in Html -

1. Headings and Subheadings

<h1> A heading </h1>

There are 6 levels of headings available from smallest to largest. ( h1 to h6)

2. Paragraphs

- <p align =left> Text जि सको left align करना है </align>

- <p align =right> Text जि सको right side में दि खा ना है </align>

- <center>Text जि सको center align करना है </center>

3. Links

4. Image

5. - ol Tag stands for Ordered list and ul for Unordered List

6. Break Tag

<br> Tag is used for styling. In most cases it's preferred to use CSS and Java for Styling.

7. Comment Tag

यह actual page मे दिखात नहीं है |

8. Form tag- It is used for adding a special Form to the Web page.

HTML में Form कैसे बनाये?

<form> tag से सा रे forms start हो ते हैं जि से हम html के body में कहीं भी लि ख सकते हैं।

Form tag में दो main attributes, method और action हो ते हैं

Method attribute की value “get” या “post” हो सकती है। By default value get हो ती है।

Get method से भेजा गया information secured नही हो ता और form के सा रे data browser के

address bar में दि खा ई दे सकते हैं। sensitive information जैसे की password आदि get method से

नही भेजना चा हि ये।

Post method secured हो ता है, send कि या हुआ को ई भी data browser में show नही हो ता

Action attribute में हम उस वेबपेज का address लि खते हैं जहां हमें data send करना हो ता है।

नीचे दिए Source Code को copy करके text editor मे paste करो और save करके ब्राउजर मे रन करके test करे |

Source Code -

<!DOCTYPE html>
<html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Write Your Title Here</title>
</head>
<body>

<!-- This is comment  -->
<!-- Types of Heading  -->
<h1>This is my heading 1 using h1 tag</h1>
<p>Computer programming is the process of designing </p>
<h2>This is my heading 2 using h2 tag</h2>
<h3>This is my heading 3 using h3 tag</h3>
<h4>This is my heading 4 using h4 tag</h4>
<h5>This is my heading 5 using h5 tag</h5>
<h6>This is my heading 6 <br>using h6 tag</h6>


<!-- ol and li tag -->
<ol type="i">
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ol>

<!-- img tag -->
<img src="https://upload.wikimedia.org/wikipedia/commons/4/46/Prog_one.png"/>


<!-- link tag -->
<li><a href="https://www.google.com">Go to google</a></li>
<!-- Button in Html -->
<button> Click me ! </button>

<!-- form in html -->
<form>
Enter your name: <input type="text"/>
Enter your Email: <input type="email"/>
<button type="submit">submit form</button>
</form>
<br/>


<!-- Table in Html  -->
<table style="width:100%;border:1px solid black">
<caption> Table In Html</caption>

<th>Name</th>
<th>Role</th>
<th>Company</th>
</tr>


<th>Name 1</th>
<th>Role 1</th>
<th>Company 1</th>
</tr>

<th>Name 2</th>
<th>Role 2</th>
<th>Company 2</th>
</tr>
</table>


</body>
</html>