HTML Introduction In HindiHTML Introduction HTML Tags HTML Meta Tags
SAROJKUMAR902944
332 views
51 slides
Oct 29, 2024
Slide 1 of 51
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
About This Presentation
HTML Introduction
HTML Tags
HTML Meta Tags
HTML Elements
HTML Attributes
HTML Formatting
HTML Heading
HTML Anchor
HTML Image
HTML List
HTML Table
HTML Form
HTML Form Elements
HTML Form input types
HTML iframe
HTML Audio
HTML Video
Slide Content
HTML को
“
Hypertext Markup Language” क
हा जाता है। यह
Web Pages ब
नाने में सबसे ज्यादा
use की
जा
ती है।
HTML का
Use क
रके हम
Web Browser को
यह
inform क
रते है
, कि
web page का
Content
user को
कैसा दिखेगा।
आइ
ये इसे अलग अलग समझते है
-
Hypertext : Hypertext व
ह
Text हो
ता है
, जि
समे किसी अन्य
Web Pages का
Link मौ
जूद होता है। जब कोई
User उस text( Anchor Text) के
ऊपर
click क
रता है
, तो
वह उस
webpage पर प
हुंच जाता है।। इस प्रकार
Web Pages में
मौजूद वह
text जि
समे लिंक होता है
, Hyper Text क
हलाते है।
Markup : कि
सी भी
Web Page के
Structure को
बनाने के काम में आती है।
for example आप ए
क
webpage में Paragraph, Heading, Table और list etc create क
र सकते है
; सा
थ
ही Images और Videos को
भी जोड़ सकते है।
Language : HTML ए
क
language है
जो
webpage ब
नाने के लिये
code -words का
Use क
रती है जिन्हे हम
tags क
हते है
इस
के मुख्य
3 भा
ग होते है
- HTML Elements , HTML Tag और HTML Text
HTML Element- HTML Tag से
मिलकर बनता है
. Angel Bracket (<>) के
बीच जो
word या
character
लि
खा होता है
, इ
से
HTML Tag क
हते है
. य
ह दो प्रकार का होता है
. प
हला
, Opening tag और
दूसरा
Closing
tag. HTML text जो
कि
HTML Tag के
बीच लिखा जाता है
.
इस
के लिए
mainly दो
प्रकार के
Tools की
जरूरत पड़ती है
-
Text Editor- HTML code लि
खने के लिए
notepad, Sublime Notepad++ या Visual Studio text
editors जै
से
softwares का
use क
रते है और उसके बाद उस
file को
.html extension से
save क
रते है।
Browser - file को
रन कराने के लिए
google chrome, mozilla firefox, Opera, IE आ
दि
browsers को
use क
र सकते है।
History of HTML
HTML की
history जा
नने के लिए हम
HTML की
दुनिया मे थोड़ा सा पीछे चलते है
,HTML Sir Tim Berners
Lee द्वा
रा
develop की
गयी थी सबसे पहले इन्होने ही
HTML का
उपयोग किया था
. व
र्तमान समय में
HTML
के
विकास का ज़िम्मेदारी एक
orgnization “World Wide Web Consortium (W3C)” के
पास है
. य
ह संस्था
ही
अब
HTML का
ख्याल रखती है
. आइए
जानते है अब तक आए
HTML के
versions बा
रे में
-
SGML / HTML
SGML – Standard Generalized Markup Language का
रूप था
. HTML first version है
“
Hypertext Markup Language” क
हा जाता है। यह
Web Pages ब
नाने में सबसे ज्यादा
use की
जा
ती है।
HTML का
Use क
रके हम
Web Browser को
यह
inform क
रते है
, कि
web page का
Content
user को
कैसा दिखेगा।
आइ
ये इसे अलग अलग समझते है
-
Hypertext : Hypertext व
ह
Text हो
ता है
, जि
समे किसी अन्य
Web Pages का
Link मौ
जूद होता है। जब कोई
User उस text( Anchor Text) के
ऊपर
click क
रता है
, तो
वह उस
webpage पर प
हुंच जाता है।। इस प्रकार
Web Pages में
मौजूद वह
text जि
समे लिंक होता है
, Hyper Text क
हलाते है।
Markup : कि
सी भी
Web Page के
Structure को
बनाने के काम में आती है।
for example आप ए
क
webpage में Paragraph, Heading, Table और list etc create क
र सकते है
; सा
थ
ही Images और Videos को
भी जोड़ सकते है।
Language : HTML ए
क
language है
जो
webpage ब
नाने के लिये
code -words का
Use क
रती है जिन्हे हम
tags क
हते है
इस
के मुख्य
3 भा
ग होते है
- HTML Elements , HTML Tag और HTML Text
HTML Element- HTML Tag से
मिलकर बनता है
. Angel Bracket (<>) के
बीच जो
word या
character
लि
खा होता है
, इ
से
HTML Tag क
हते है
. य
ह दो प्रकार का होता है
. प
हला
, Opening tag और
दूसरा
Closing
tag. HTML text जो
कि
HTML Tag के
बीच लिखा जाता है
.
इस
के लिए
mainly दो
प्रकार के
Tools की
जरूरत पड़ती है
-
Text Editor- HTML code लि
खने के लिए
notepad, Sublime Notepad++ या Visual Studio text
editors जै
से
softwares का
use क
रते है और उसके बाद उस
file को
.html extension से
save क
रते है।
Browser - file को
रन कराने के लिए
google chrome, mozilla firefox, Opera, IE आ
दि
browsers को
use क
र सकते है।
History of HTML
HTML की
history जा
नने के लिए हम
HTML की
दुनिया मे थोड़ा सा पीछे चलते है
,HTML Sir Tim Berners
Lee द्वा
रा
develop की
गयी थी सबसे पहले इन्होने ही
HTML का
उपयोग किया था
. व
र्तमान समय में
HTML
के
विकास का ज़िम्मेदारी एक
orgnization “World Wide Web Consortium (W3C)” के
पास है
. य
ह संस्था
ही
अब
HTML का
ख्याल रखती है
. आइए
जानते है अब तक आए
HTML के
versions बा
रे में
-
SGML / HTML
SGML – Standard Generalized Markup Language का
रूप था
. HTML first version है
इस
के द्वारा
text को
Structure कि
या जा सकता था
. इस
के लिए कुछ
Tags का
create कि
या गया था और इस
version का
कोई नाम नही था इसे सिर्फ
HTML क
हा गया
. ले
किन
HTML के
अगले संस्करणो के नाम थे
.
इस
लिए सुविधा के लिए इस संस्करण को
HTML 1.0 भी
कहा जाता है
.
इस version के
बारे में आजकल नहीं पता हैं पर इस
version में
बहुत कमिया थी जिसके कारण नये
version
आ
ते रहे हैं ।नये
version में
इन कमियो को दूर किया गया और बहुत
simple or easy to learn कि
या गया ।
ये
HTML का
शुरुआती दौर था तब इसमें इतना कुछ नहीं था बस
simple text tag थे
। इसके अब तक कई
versions आ
चुके है
-
HTML 2.0
HTML के
first version के
बाद एक
group IETF – Internet Engineering Task Force द्वा
रा
HTML के
अगले
version को
Rename कि
या गया
. य
ह
HTML 2.0 version क
हलाया जिसे
24 Nov 1995 में
publish कि
या
ग
या था
.इस version में
कुछ नयी
facilities add की
गई जिसमें ‘
Image Tag‘ सब
से
important facility थी.
ले
किन अभी
Internet ज्
यादा
Popular न
ही हुआ था
.
HTML 3.0
इस स
मय तक
HTML और
इंटरनेट अपनी छाप छोड चुके थे और दोनो लोकप्रिय होने लगे थे
. अब प
हल से
ज्
यादा लोग इससे जुड चुके थे
. अ
धिक से अधिक लोग
HTML सी
खना चाहते थे और
Internet से
जुडना भी
चा
हते थे
.
HTML 3.2
HTML 1.0 के
publish और HTML 3.0 की
सिफारिश तक एक
Orgnization का
Evolution हो
चुका था
, जो
HTML language के
लिए कार्य करने के लिए बनाया गया था
. इ
से
W3C – World Wide Web
Consortium के
नाम से जाना जाता है
.
HTML 4.0
अब Internet का
फी
popular था. अ
धिक से अधिक लोग
HTML जु
ड़ना चाहते थे
. और
जो पहले से ही इससे
जु
ड़े थे
. वे
HTML को
ज्यादा चाहने लगे
. इस
लिए
HTML का
next version HTML 4.0 को
publish कि
या गया
.
य
ह
HTML की
history मे
एक बड़ा बदलाव था।
HTML 4.01
HTML next version HTML 4.01 था
जो
HTML 4.0 का
updated version है. इ
से
W3C द्वा
रा
1999 में
Publish कि
या गया था
. आ
ज लगभग
website इ
सी
version पर ब
नी हुई है
.
Xhtml - Xhtml की
Full Form - Extensible HyperText Markup Language है, 2000मे
develop कि
या
ग
या था
XML HTML से
ज्यादा आसान और
customizable है
XML मे
आप खुद से नया
tag ब
ना सकते होऔर
अप
ने जरूरत के
according document के
structure को
तैयार कर सकते हो इसलिए इसे
Extensible
language क
हा जाता है
के द्वारा
text को
Structure कि
या जा सकता था
. इस
के लिए कुछ
Tags का
create कि
या गया था और इस
version का
कोई नाम नही था इसे सिर्फ
HTML क
हा गया
. ले
किन
HTML के
अगले संस्करणो के नाम थे
.
इस
लिए सुविधा के लिए इस संस्करण को
HTML 1.0 भी
कहा जाता है
.
इस version के
बारे में आजकल नहीं पता हैं पर इस
version में
बहुत कमिया थी जिसके कारण नये
version
आ
ते रहे हैं ।नये
version में
इन कमियो को दूर किया गया और बहुत
simple or easy to learn कि
या गया ।
ये
HTML का
शुरुआती दौर था तब इसमें इतना कुछ नहीं था बस
simple text tag थे
। इसके अब तक कई
versions आ
चुके है
-
HTML 2.0
HTML के
first version के
बाद एक
group IETF – Internet Engineering Task Force द्वा
रा
HTML के
अगले
version को
Rename कि
या गया
. य
ह
HTML 2.0 version क
हलाया जिसे
24 Nov 1995 में
publish कि
या
ग
या था
.इस version में
कुछ नयी
facilities add की
गई जिसमें ‘
Image Tag‘ सब
से
important facility थी.
ले
किन अभी
Internet ज्
यादा
Popular न
ही हुआ था
.
HTML 3.0
इस स
मय तक
HTML और
इंटरनेट अपनी छाप छोड चुके थे और दोनो लोकप्रिय होने लगे थे
. अब प
हल से
ज्
यादा लोग इससे जुड चुके थे
. अ
धिक से अधिक लोग
HTML सी
खना चाहते थे और
Internet से
जुडना भी
चा
हते थे
.
HTML 3.2
HTML 1.0 के
publish और HTML 3.0 की
सिफारिश तक एक
Orgnization का
Evolution हो
चुका था
, जो
HTML language के
लिए कार्य करने के लिए बनाया गया था
. इ
से
W3C – World Wide Web
Consortium के
नाम से जाना जाता है
.
HTML 4.0
अब Internet का
फी
popular था. अ
धिक से अधिक लोग
HTML जु
ड़ना चाहते थे
. और
जो पहले से ही इससे
जु
ड़े थे
. वे
HTML को
ज्यादा चाहने लगे
. इस
लिए
HTML का
next version HTML 4.0 को
publish कि
या गया
.
य
ह
HTML की
history मे
एक बड़ा बदलाव था।
HTML 4.01
HTML next version HTML 4.01 था
जो
HTML 4.0 का
updated version है. इ
से
W3C द्वा
रा
1999 में
Publish कि
या गया था
. आ
ज लगभग
website इ
सी
version पर ब
नी हुई है
.
Xhtml - Xhtml की
Full Form - Extensible HyperText Markup Language है, 2000मे
develop कि
या
ग
या था
XML HTML से
ज्यादा आसान और
customizable है
XML मे
आप खुद से नया
tag ब
ना सकते होऔर
अप
ने जरूरत के
according document के
structure को
तैयार कर सकते हो इसलिए इसे
Extensible
language क
हा जाता है
HTML 5
इस
मे
HTML 4.01 के
features के
अलावा
XML कि
विशेषताओं को भी जोडा गया है
. य
ह
version धी
रे
-धी
रे
अप
नी पहचान बना रहा है
. और
काफी
popular हो
चुका है
.
"HTML का
latest version HTML 5.2 W3C की
Recommendation पर 14 Dec 2017 को
publish कि
या
ग
या है
"।
HTML का
उपयोग कहाँ और कैसे किया जाता है
?
HTML का
Use web document create के
लिए किया जाता है
. म
गर
, इस
की
limit web page ब
नाने तक ही
न
हीं हैक्योंकि
HTML web का
आधार है
. इस
के बिना
web creationकी
कल्पना भी नहीं की जा सकती है
.
HTML Document ब
नाने के अलावा इसका
use others felids मे
भी किया जाता है
Web Page Development
Navigation
Game Development
Responsive Graphics
Web Document Formatting
HTML
में
tags
एकतरहसे
keywords
हीहोतेहैंजो
define
करतेहैंकिकिसी
web page
का
content
किसतरहसे
format
और
display
होगा।
Tags keyword
के
type
होतेहै
,
जोहमेबतातेहैकीकैसे
content
को
format
और
content
को
display
करताहै।
web browser
कीमददसेहम
HTML content
और
simple content
केबीचअंतरकर पताहै।
HTML Tag
केतीन
main parts
होतेहै
-
opening tag
closing tag
content
परकई
HTML tags unclosed
होतेहै।जब एक
web browser HTML document read
करताहैतब वह
top to bottom
और
left to right read
करताहै।
HTML tags
का
use html document read
करनेके
लिया
use
करतेहै।
html tags
की
different properties है
।
एक
HTML file
में
essential tag
होनेचाहिएताकि
web browser HTML text & simple text का
difference
जानसके। आपकोजितने
tags
चाहिए उतनेआप
use
कर सकतेहै।
इस
मे
HTML 4.01 के
features के
अलावा
XML कि
विशेषताओं को भी जोडा गया है
. य
ह
version धी
रे
-धी
रे
अप
नी पहचान बना रहा है
. और
काफी
popular हो
चुका है
.
"HTML का
latest version HTML 5.2 W3C की
Recommendation पर 14 Dec 2017 को
publish कि
या
ग
या है
"।
HTML का
उपयोग कहाँ और कैसे किया जाता है
?
HTML का
Use web document create के
लिए किया जाता है
. म
गर
, इस
की
limit web page ब
नाने तक ही
न
हीं हैक्योंकि
HTML web का
आधार है
. इस
के बिना
web creationकी
कल्पना भी नहीं की जा सकती है
.
HTML Document ब
नाने के अलावा इसका
use others felids मे
भी किया जाता है
Web Page Development
Navigation
Game Development
Responsive Graphics
Web Document Formatting
HTML
में
tags
एकतरहसे
keywords
हीहोतेहैंजो
define
करतेहैंकिकिसी
web page
का
content
किसतरहसे
format
और
display
होगा।
Tags keyword
के
type
होतेहै
,
जोहमेबतातेहैकीकैसे
content
को
format
और
content
को
display
करताहै।
web browser
कीमददसेहम
HTML content
और
simple content
केबीचअंतरकर पताहै।
HTML Tag
केतीन
main parts
होतेहै
-
opening tag
closing tag
content
परकई
HTML tags unclosed
होतेहै।जब एक
web browser HTML document read
करताहैतब वह
top to bottom
और
left to right read
करताहै।
HTML tags
का
use html document read
करनेके
लिया
use
करतेहै।
html tags
की
different properties है
।
एक
HTML file
में
essential tag
होनेचाहिएताकि
web browser HTML text & simple text का
difference
जानसके। आपकोजितने
tags
चाहिए उतनेआप
use
कर सकतेहै।
देखाजाएतोहर
tag task perform
करताहै।हम
html tags
कोइस प्रकारलिखतेहै
-
सारे
tags
इन
bracket <>
में
enclosed
होनेचाहिए।
अगर आप
open tag use
कर रहेहोतोआपको
close tag
भी
use
करनापड़ेगा
HTML Meta Tags
<!DOCTYPE> = used for opening.
<title> = to present title on status bar.
HTML Text Tags
<p> = indicates paragraph tag.
<h1> = represent heading 1 tag.
<h2> = represent heading 2 tag
<h3> = represent heading 3 tag
<h4> = represent heading 4 tag
<h5> = represent heading 5 tag
<h6> = represent heading 6 tag
<strong> = represent bold tag,
<address> = represent author’s information
<em> = indicates emphasize,
<abbr> = abbreviation,
<acronym> = indicate acronym for a words,
<bdo> = represent current text
<blockquote> = represent content from other source
<cite> = represent tiltle,book,website etc
<code> = represent part of programing code
<del> = represent deleted text
tag task perform
करताहै।हम
html tags
कोइस प्रकारलिखतेहै
-
सारे
tags
इन
bracket <>
में
enclosed
होनेचाहिए।
अगर आप
open tag use
कर रहेहोतोआपको
close tag
भी
use
करनापड़ेगा
HTML Meta Tags
<!DOCTYPE> = used for opening.
<title> = to present title on status bar.
HTML Text Tags
<p> = indicates paragraph tag.
<h1> = represent heading 1 tag.
<h2> = represent heading 2 tag
<h3> = represent heading 3 tag
<h4> = represent heading 4 tag
<h5> = represent heading 5 tag
<h6> = represent heading 6 tag
<strong> = represent bold tag,
<address> = represent author’s information
<em> = indicates emphasize,
<abbr> = abbreviation,
<acronym> = indicate acronym for a words,
<bdo> = represent current text
<blockquote> = represent content from other source
<cite> = represent tiltle,book,website etc
<code> = represent part of programing code
<del> = represent deleted text
<dfn> = represent a sentence or phrase
<kbd> = represent keyboard input
<pre> = represent formatted text
<samp> = represent sample output
<var> = represent variable name
<br> = used to apply single line breakH
<a> = To provide link.
HTML Link Tags
<a> = Represent anchor
<base> = Defines the base URL
HTML Image and Object Tags
<img>= used to insert an image
<area> = defines area of the map
<map> = defines image map
<param> = defines parameter for an object
<object> = used to embed an object
HTML List Tags
<ul>=defines unordered list
<ol> = defines ordered list of items
<li> = represent items in a list
<dl> = define a description list
<dt> = define a term in description list
<dd> = provide definition
HTML Table Tags
<Table> = represent data in tabular form
<kbd> = represent keyboard input
<pre> = represent formatted text
<samp> = represent sample output
<var> = represent variable name
<br> = used to apply single line breakH
<a> = To provide link.
HTML Link Tags
<a> = Represent anchor
<base> = Defines the base URL
HTML Image and Object Tags
<img>= used to insert an image
<area> = defines area of the map
<map> = defines image map
<param> = defines parameter for an object
<object> = used to embed an object
HTML List Tags
<ul>=defines unordered list
<ol> = defines ordered list of items
<li> = represent items in a list
<dl> = define a description list
<dt> = define a term in description list
<dd> = provide definition
HTML Table Tags
<Table> = represent data in tabular form
<tr> = defines row cell
<td> = defines cell of html table
<th> = defines head cell
<tbody> = represent body contain
<font> = defines font size, colour and face
<col> = defines column with a table
<colgroup> = defines group of columns
<caption> = defines a caption for a table
HTML Form Tags
<input> = define a Html form
<textarea> = define multiple lines input
<select> = represent a control to provide menu of option
<option> = define option or item
<optgroup> = It is used to group the options
<button> = used to represent clickable buttons
<label> = defines a text label
<legend> = defines caption for content
HTML Scripting & Code Tags
<script> =
इस
Tag
का
use Javascript file
को
add
या
Html file में
JavaScript
को
use
करनेकेलिएकियाजाताहै।
<code> =
इसका
use code
को
show
करनेकेलिएकियाजाताहै।
<link> =
इस
Tag
का
use CSS file
को
add
करनेकेलिएकियाजाताहै।
HTML Tags Example
File : html_tags.html
<td> = defines cell of html table
<th> = defines head cell
<tbody> = represent body contain
<font> = defines font size, colour and face
<col> = defines column with a table
<colgroup> = defines group of columns
<caption> = defines a caption for a table
HTML Form Tags
<input> = define a Html form
<textarea> = define multiple lines input
<select> = represent a control to provide menu of option
<option> = define option or item
<optgroup> = It is used to group the options
<button> = used to represent clickable buttons
<label> = defines a text label
<legend> = defines caption for content
HTML Scripting & Code Tags
<script> =
इस
Tag
का
use Javascript file
को
add
या
Html file में
JavaScript
को
use
करनेकेलिएकियाजाताहै।
<code> =
इसका
use code
को
show
करनेकेलिएकियाजाताहै।
<link> =
इस
Tag
का
use CSS file
को
add
करनेकेलिएकियाजाताहै।
HTML Tags Example
File : html_tags.html
<!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Tags Examples</title>
</head>
<body>
<!-- abbr tag -->
<p>An <abbr title = "Hypertext Markup language">HTML
</abbr>language is used to create web pages. </p>
<!-- mark tag -->
<p>This tag will <mark>highlight</mark> the text.</p>
<!-- strong tag -->
<p>In HTML it is recommended to use
<strong>lower-case</strong>, while writing a code. </p>
<!-- em tag -->
<p>HTML is an <em>easy </em>to learn language.</p>
<!-- dfn tag -->
<p><dfn>HTML </dfn> is a markup language. </p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Tags Examples</title>
</head>
<body>
<!-- abbr tag -->
<p>An <abbr title = "Hypertext Markup language">HTML
</abbr>language is used to create web pages. </p>
<!-- mark tag -->
<p>This tag will <mark>highlight</mark> the text.</p>
<!-- strong tag -->
<p>In HTML it is recommended to use
<strong>lower-case</strong>, while writing a code. </p>
<!-- em tag -->
<p>HTML is an <em>easy </em>to learn language.</p>
<!-- dfn tag -->
<p><dfn>HTML </dfn> is a markup language. </p>
<!-- blockquote -->
<blockquote><p>?The first step toward success is taken when
you refuse to be a captive of the environment in which you first
find yourself.?</p></blockquote>
<cite>-Mark Caine</cite>
<p>Steve Jobs said: <q>If You Are Working On Something That
You Really Care About, You Don?t Have To Be Pushed. The Vision
Pulls You.</q>?</p>
<!-- code tag -->
<p>First JavaScript program</p>
<p>
<code>
<script type="text/javascript">
console.log('Hello JS');
</script>
</code>
</p>
<!-- keyboard tag -->
<p>press <kbd>Ctrl</kbd> + <kbd>c</kbd> to copy.</p>
<!-- address tag -->
<address> You can ask your queries by contact us on <a
href="/page/contact-us">Contact Use</a>
<br> You can also visit at : <br>your address.
<blockquote><p>?The first step toward success is taken when
you refuse to be a captive of the environment in which you first
find yourself.?</p></blockquote>
<cite>-Mark Caine</cite>
<p>Steve Jobs said: <q>If You Are Working On Something That
You Really Care About, You Don?t Have To Be Pushed. The Vision
Pulls You.</q>?</p>
<!-- code tag -->
<p>First JavaScript program</p>
<p>
<code>
<script type="text/javascript">
console.log('Hello JS');
</script>
</code>
</p>
<!-- keyboard tag -->
<p>press <kbd>Ctrl</kbd> + <kbd>c</kbd> to copy.</p>
<!-- address tag -->
<address> You can ask your queries by contact us on <a
href="/page/contact-us">Contact Use</a>
<br> You can also visit at : <br>your address.
</address>
</body>
</html>Output
An HTML language is used to create web pages.
This tag will highlight the text.
In HTML it is recommended to use lower-case, while writing a
code.
HTML is an easy to learn language.
HTML is a markup language.
?The first step toward success is taken when you refuse to be a
captive of the environment in which you first find yourself.?
-Mark Caine
Steve Jobs said: If You Are Working On Something That You Really
Care About, You Don?t Have To Be Pushed. The Vision Pulls You.?
press Ctrl + c to copy.
You can ask your queries by contact us on Contact Use
You can also visit at :
your address.
Meta tags Html document
के
metadata
को
define
करतेहै।
Meta data
हमे
data
केबारेमेंबताताहै।
<meta> tags ह
मेशा
<head> element
केअंदरहोतेहै।हम
meta tags
को
character set ,page
description
और
keywords
को
specify
करनेकेलिया
use
करतेहै।
</body>
</html>Output
An HTML language is used to create web pages.
This tag will highlight the text.
In HTML it is recommended to use lower-case, while writing a
code.
HTML is an easy to learn language.
HTML is a markup language.
?The first step toward success is taken when you refuse to be a
captive of the environment in which you first find yourself.?
-Mark Caine
Steve Jobs said: If You Are Working On Something That You Really
Care About, You Don?t Have To Be Pushed. The Vision Pulls You.?
press Ctrl + c to copy.
You can ask your queries by contact us on Contact Use
You can also visit at :
your address.
Meta tags Html document
के
metadata
को
define
करतेहै।
Meta data
हमे
data
केबारेमेंबताताहै।
<meta> tags ह
मेशा
<head> element
केअंदरहोतेहै।हम
meta tags
को
character set ,page
description
और
keywords
को
specify
करनेकेलिया
use
करतेहै।
Meta base page
पर
display
नहींहोतापर वह
machine
मे
parsable
होताहै।
Meta base
हम
browser
में
use
करतेहैताकिहम
content
को
display
और
page
को
reload
कर सकेऔर
search engine और
web services
मेंभीयह
use
होताहै। यहएक
method
हैजिससे
web designers viewport
पर
control
पाकर
meta tag
को
use
कर सके।
Advantages Of Meta Tags
Meta tags
के
advantages
कुछइस प्रकारहै।
meta tag user
और
search engines
कोआपका
page understand
करनेमेंमददकरताहै।
वहहमेबताताहैकीकितनेलोगोनेहमारी
website
को
incline
कियाहै।
Meta tags solid SEO strategy
का
important part है
।
Meta tags
हमे
smooth , catchy
और
attractive meta description
लिखनेमेंमददकरताहै।
HTML Meta Tags Examples
description : Define a description of your web pages.
<metaname="description" content="Learn Free Web tutorials Like
HTML , CSS , PHP , Laravel, JavaScript .">
viewpoint : Setting the viewpoint to make your website look good on all device
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
character : Define the character set used
<meta charset="UTF-8">
HTML Meta Tag Attributes
charset : Specifies the character encoding for the HTML document
content : Specifies the value associated with the http-equiv or name attribute
http-equiv : Provides an HTTP header for the information/value of the content attribute
name : specifies a name for the metabase
Another Example
<!DOCTYPE html>
<html>
<head>
पर
display
नहींहोतापर वह
machine
मे
parsable
होताहै।
Meta base
हम
browser
में
use
करतेहैताकिहम
content
को
display
और
page
को
reload
कर सकेऔर
search engine और
web services
मेंभीयह
use
होताहै। यहएक
method
हैजिससे
web designers viewport
पर
control
पाकर
meta tag
को
use
कर सके।
Advantages Of Meta Tags
Meta tags
के
advantages
कुछइस प्रकारहै।
meta tag user
और
search engines
कोआपका
page understand
करनेमेंमददकरताहै।
वहहमेबताताहैकीकितनेलोगोनेहमारी
website
को
incline
कियाहै।
Meta tags solid SEO strategy
का
important part है
।
Meta tags
हमे
smooth , catchy
और
attractive meta description
लिखनेमेंमददकरताहै।
HTML Meta Tags Examples
description : Define a description of your web pages.
<metaname="description" content="Learn Free Web tutorials Like
HTML , CSS , PHP , Laravel, JavaScript .">
viewpoint : Setting the viewpoint to make your website look good on all device
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
character : Define the character set used
<meta charset="UTF-8">
HTML Meta Tag Attributes
charset : Specifies the character encoding for the HTML document
content : Specifies the value associated with the http-equiv or name attribute
http-equiv : Provides an HTTP header for the information/value of the content attribute
name : specifies a name for the metabase
Another Example
<!DOCTYPE html>
<html>
<head>
<title> Example for Meta Tag </title>
<meta name = "keyword" content = "PHP tutorials , Laravel
tutorials , JavaScript tutorials">
<meta name="description" content="Learn PHP , Laravel ,
JavaScript , jQuery Tutorials In Hindi">
<meta name="author" content="Rahul Kumar">
</head>
<body>
Welcome to w3schools.in<br>
You are learning about HTML Meta Tags
</body>
</html>
हम
HTML elements
को
start tag ,content
और
end tag
से
define
करतेहै। अगर
element
में
content
होतोवह
closing tag
से
end
होताहैजहा
element
केआगेएक
slash
होतीहै।
For Examples
Start Tag | Content | End Tag
-----------------------------------------------------
<p> | This is paragraph content. | </p>
<h1> | This is heading content. | </h1>
<div> | This is division content. | </div>
तोयहाँ
<p > और <p/>
एक
Html element
है। इसीतरह
<h> और <h/>
एक
html element
है।कई ऐसे
Html elements
हैजिसेहमे
close
करनेकीज़रूरतनहींहै
,
उन्हेहम
void elements
कहतेहै।
Html
मेंकई ऐसे
elements
हैजो
html documents specify
करतेहैऔर यह
specify
करतेहैकीकोनसा
content
कौनसे
html document
मेंहोनाचाहिए।
Difference between html tags and html elements
Html tag content
को
define
करताहैऔर
Html elements
में
opening
और
closing tags
होतेहै।
<meta name = "keyword" content = "PHP tutorials , Laravel
tutorials , JavaScript tutorials">
<meta name="description" content="Learn PHP , Laravel ,
JavaScript , jQuery Tutorials In Hindi">
<meta name="author" content="Rahul Kumar">
</head>
<body>
Welcome to w3schools.in<br>
You are learning about HTML Meta Tags
</body>
</html>
हम
HTML elements
को
start tag ,content
और
end tag
से
define
करतेहै। अगर
element
में
content
होतोवह
closing tag
से
end
होताहैजहा
element
केआगेएक
slash
होतीहै।
For Examples
Start Tag | Content | End Tag
-----------------------------------------------------
<p> | This is paragraph content. | </p>
<h1> | This is heading content. | </h1>
<div> | This is division content. | </div>
तोयहाँ
<p > और <p/>
एक
Html element
है। इसीतरह
<h> और <h/>
एक
html element
है।कई ऐसे
Html elements
हैजिसेहमे
close
करनेकीज़रूरतनहींहै
,
उन्हेहम
void elements
कहतेहै।
Html
मेंकई ऐसे
elements
हैजो
html documents specify
करतेहैऔर यह
specify
करतेहैकीकोनसा
content
कौनसे
html document
मेंहोनाचाहिए।
Difference between html tags and html elements
Html tag content
को
define
करताहैऔर
Html elements
में
opening
और
closing tags
होतेहै।
Html tag <
से
open
होताहैऔर
>
से
close
होताहै
Html elements
में
html tag
मेंलिखी
information
होतीहै।
Html tag keyword
जैसेहोतेहैजहाहर एक
word
का
special meaning
होताहैऔर
html elements में
general content
होताहै।
Html tag
में
html elements
होतेहैऔर
html elements
में
content
होताहै।
Html tag
मेंहम
element
का
start
और
end mark
कर सकतेहैऔर
html element start tag ,end tag
और
attributes
का
collection है
।
HTML elements Example
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
HTML Nested elements Example
File : nested_elements.html
Copy Fullscreen Run
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p></body>
</body>
</html>
Types of elements
Html elements
कुछइस प्रकारहै
-
void elements
से
open
होताहैऔर
>
से
close
होताहै
Html elements
में
html tag
मेंलिखी
information
होतीहै।
Html tag keyword
जैसेहोतेहैजहाहर एक
word
का
special meaning
होताहैऔर
html elements में
general content
होताहै।
Html tag
में
html elements
होतेहैऔर
html elements
में
content
होताहै।
Html tag
मेंहम
element
का
start
और
end mark
कर सकतेहैऔर
html element start tag ,end tag
और
attributes
का
collection है
।
HTML elements Example
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
HTML Nested elements Example
File : nested_elements.html
Copy Fullscreen Run
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p></body>
</body>
</html>
Types of elements
Html elements
कुछइस प्रकारहै
-
void elements
template element
raw text elements
escapable raw text elements
foreign elements
normal elements
HTML Block Elements
block elements
की
start always new line
सेहोतीहै।
block elements
में
always full width available
होतीहै।
block element
में
top
और
bottom margin
होताहै।
कुछ
block element
इस प्रकारहै
-
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>
<h6>
<header>
raw text elements
escapable raw text elements
foreign elements
normal elements
HTML Block Elements
block elements
की
start always new line
सेहोतीहै।
block elements
में
always full width available
होतीहै।
block element
में
top
और
bottom margin
होताहै।
कुछ
block element
इस प्रकारहै
-
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>
<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<p>
<pre>
<section>
HTML Inline Elements
Inline element
की
start new line
सेनहींहोतीहै।
inline elements
अपने
need
के
according width
लेताहै। यह
element paragraph
केअंदरलिखाहोताहै।
कुछ
inline element
इस प्रकारहै
-
<a>
<abbr>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<li>
<main>
<nav>
<noscript>
<p>
<pre>
<section>
HTML Inline Elements
Inline element
की
start new line
सेनहींहोतीहै।
inline elements
अपने
need
के
according width
लेताहै। यह
element paragraph
केअंदरलिखाहोताहै।
कुछ
inline element
इस प्रकारहै
-
<a>
<abbr>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
HTML Element Example
File : html_elements.html
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements Example</title>
</head>
<body>
<h5>h5 is a block element</h5>
<header>header is a block element</header>
<div>div is a block element</div>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
HTML Element Example
File : html_elements.html
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements Example</title>
</head>
<body>
<h5>h5 is a block element</h5>
<header>header is a block element</header>
<div>div is a block element</div>
<blockquote>blockquote is a block element</blockquote>
<pre>pre is a block element</pre>
<span>span is an inline element</span>
<big>Rahul</big>
<b>Kumar</b>
</body>
</html>
Attributes HTML
में
defined
कुछ
special keywords
होतेहैंजो
element
केबारेमें
additional
information
देताहैं।हर एक
elements
केएकयाएकसेज्यादा
attributes
होसकतेहैं।
सभी
html elements
में
attributes
होतेहै।
attributes
हमें
elements
केबारेमें
additional information
देतेहै।
attributes always start tag
से
specified
होतेहै।
.
attributes usually name /value pairs
मेंआतेहैजैसे
name="value".
कुछ
attributes
इसतरहसेहैं
-
href attribute
The href attributes URL <a> tag
मेंको
specifies
करताहै।
<a href="/php">Learn PHP</a>
src attribute
src attribute <img> tag
में
image
के
path
को
specify
करके
display
करताहै।हालाँकिहमएकसेज्यादा
attributes
भी
use
कर सकतेहैं।
width and height attribute
image tag में width और height attributes
भी
use
कर सकतेहैंताकि
image
की
width
और
height को
control
कर सके।
<pre>pre is a block element</pre>
<span>span is an inline element</span>
<big>Rahul</big>
<b>Kumar</b>
</body>
</html>
Attributes HTML
में
defined
कुछ
special keywords
होतेहैंजो
element
केबारेमें
additional
information
देताहैं।हर एक
elements
केएकयाएकसेज्यादा
attributes
होसकतेहैं।
सभी
html elements
में
attributes
होतेहै।
attributes
हमें
elements
केबारेमें
additional information
देतेहै।
attributes always start tag
से
specified
होतेहै।
.
attributes usually name /value pairs
मेंआतेहैजैसे
name="value".
कुछ
attributes
इसतरहसेहैं
-
href attribute
The href attributes URL <a> tag
मेंको
specifies
करताहै।
<a href="/php">Learn PHP</a>
src attribute
src attribute <img> tag
में
image
के
path
को
specify
करके
display
करताहै।हालाँकिहमएकसेज्यादा
attributes
भी
use
कर सकतेहैं।
width and height attribute
image tag में width और height attributes
भी
use
कर सकतेहैंताकि
image
की
width
और
height को
control
कर सके।
<img src="/assets/favicon.png" width="500" height="600">
alt attribute
यहएक
image
के
alternate text
को
specify
करताहै
means
अगर वह
image display
नहींहोतीया
image
दिएगए
url
पर
found
नहींहैतोये
text show जा
यगा।
<img src="any_random_img.jpg" alt="It's a random image">
style attribute
यह
element
में
CSS style add
करताहै।
<p style="color:red;">This is a red paragraph.</p>
lang attribute
यह
HTML document
की
language declare
करताहै।
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
title attribute
यहकिसी
element
केबारेमें
extra information define
करताहै।जिससेजबभीउस
element पर
cursor
लातेहैंतोवही
information show
होतीहै।
<p title="You will see this on mouse over.">simple paragraph</p>
class attribute
class attribute
का
use
किसीभी
element
पर
classes define
करनेकेलिएकियाजाताहै
, single class
attribute
मेंहमएकयाएकसेज्यादा
class
का
name
देसकतेहैं।
alt attribute
यहएक
image
के
alternate text
को
specify
करताहै
means
अगर वह
image display
नहींहोतीया
image
दिएगए
url
पर
found
नहींहैतोये
text show जा
यगा।
<img src="any_random_img.jpg" alt="It's a random image">
style attribute
यह
element
में
CSS style add
करताहै।
<p style="color:red;">This is a red paragraph.</p>
lang attribute
यह
HTML document
की
language declare
करताहै।
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
title attribute
यहकिसी
element
केबारेमें
extra information define
करताहै।जिससेजबभीउस
element पर
cursor
लातेहैंतोवही
information show
होतीहै।
<p title="You will see this on mouse over.">simple paragraph</p>
class attribute
class attribute
का
use
किसीभी
element
पर
classes define
करनेकेलिएकियाजाताहै
, single class
attribute
मेंहमएकयाएकसेज्यादा
class
का
name
देसकतेहैं।
class attribute
का
use
करकेहम
elements
पर
CSS apply
करतेहैं
, और JavaScript DOM के
through HTML content
को
dynamic
बनातेहैं।
//single class
<p class="highlight">This is a paragraph.</p>
//multiple class
<div class="box highlight">Some content</div>
id attribute
जैसाइसके
name
सेहीपताचलताहै
, id attribute
का
use
किसीभी
element
पर
unique name define
करनेकेलिएकियाजाताहै।किसी
element
मेंसिर्फएकही
id attribute
होसकताहै।
<p id="my_info">It's all about me.</p>
यहएकऐसा
process
हैजिससेहम
text
को
format
करकेउसे
better look
और
feel
देतेहै।
html
हमेंयह
ability
देताहैकीहम
CSS
केबिना
text
को
format क
रे।
html
मैकईसारे
formatting tags
हैजोकी
text
को
bold, italicized, or underlined
करतेहै।
Some html format tags are-
<font> The <font> tag is used to change the format of the text on
the web page.
<b> The <b> tag will bold the text inside the tag.
<i> The <i> tag will italicize the text inside the tag.
<u> The <u> tag will underline the text inside the tag.
Advantages of html formatting
content
मै
clear
और
consistent layout हो
गा।
content
के
automated tables easily insert हों
गे।
content
कोअच्छी
way
से
present
कियाजाताहै।
headings
कोहम
easily view
और
edit
कर सकतेहै।
का
use
करकेहम
elements
पर
CSS apply
करतेहैं
, और JavaScript DOM के
through HTML content
को
dynamic
बनातेहैं।
//single class
<p class="highlight">This is a paragraph.</p>
//multiple class
<div class="box highlight">Some content</div>
id attribute
जैसाइसके
name
सेहीपताचलताहै
, id attribute
का
use
किसीभी
element
पर
unique name define
करनेकेलिएकियाजाताहै।किसी
element
मेंसिर्फएकही
id attribute
होसकताहै।
<p id="my_info">It's all about me.</p>
यहएकऐसा
process
हैजिससेहम
text
को
format
करकेउसे
better look
और
feel
देतेहै।
html
हमेंयह
ability
देताहैकीहम
CSS
केबिना
text
को
format क
रे।
html
मैकईसारे
formatting tags
हैजोकी
text
को
bold, italicized, or underlined
करतेहै।
Some html format tags are-
<font> The <font> tag is used to change the format of the text on
the web page.
<b> The <b> tag will bold the text inside the tag.
<i> The <i> tag will italicize the text inside the tag.
<u> The <u> tag will underline the text inside the tag.
Advantages of html formatting
content
मै
clear
और
consistent layout हो
गा।
content
के
automated tables easily insert हों
गे।
content
कोअच्छी
way
से
present
कियाजाताहै।
headings
कोहम
easily view
और
edit
कर सकतेहै।
documents
के
section
कोहम
easily move
कर सकतेहै।
designers readily
देखसकतेहैकीकोनसी
style
को
place
करनाहै।
HTML Formatting element list
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup > - Superscript text
HTML <b> Tag
<b> element bold text
को
define
करताहै।
<b>This text is bold</b>
Output :
This text is bold
HTML <strong> Tag
<strong> element strong text
को
define
करताहै।
<strong>This text is strong</strong>
Output :
This text is strong
HTML <i> Tag
<i> element italic text
को
define
करताहै।
<i>This text is italic</i>
के
section
कोहम
easily move
कर सकतेहै।
designers readily
देखसकतेहैकीकोनसी
style
को
place
करनाहै।
HTML Formatting element list
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup > - Superscript text
HTML <b> Tag
<b> element bold text
को
define
करताहै।
<b>This text is bold</b>
Output :
This text is bold
HTML <strong> Tag
<strong> element strong text
को
define
करताहै।
<strong>This text is strong</strong>
Output :
This text is strong
HTML <i> Tag
<i> element italic text
को
define
करताहै।
<i>This text is italic</i>
Output :
This text is italic
HTML <em> Tag
<em> element emphasized text
को
define
करताहै।
<em>This text is emphasized</em>
Output :
This text is emphasized
HTML <small> Tag
<small> element small text
को
define
करताहै।
<small>This text is small</small>
Output :
This text is small
HTML <big> Tag
<big> element big text
को
define
करताहै।
<big>This text is big</big>
Output :
This text is big
HTML <mark> Tag
<mark> element mark(highlight) text
को
define
करताहै।
<mark>This text is highlighted</mark>
Output :
This text is highlighted
HTML <del> Tag
<del> element deleted text
को
define
करताहै।
<del>This text is deleted</del>
Output :
This text is deleted
HTML <ins> Tag
<ins> element inserted text
को
define
करताहै।
This text is italic
HTML <em> Tag
<em> element emphasized text
को
define
करताहै।
<em>This text is emphasized</em>
Output :
This text is emphasized
HTML <small> Tag
<small> element small text
को
define
करताहै।
<small>This text is small</small>
Output :
This text is small
HTML <big> Tag
<big> element big text
को
define
करताहै।
<big>This text is big</big>
Output :
This text is big
HTML <mark> Tag
<mark> element mark(highlight) text
को
define
करताहै।
<mark>This text is highlighted</mark>
Output :
This text is highlighted
HTML <del> Tag
<del> element deleted text
को
define
करताहै।
<del>This text is deleted</del>
Output :
This text is deleted
HTML <ins> Tag
<ins> element inserted text
को
define
करताहै।
<ins>This text is inserted</ins>
Output :
This text is inserted
HTML <sub> Tag
<sub> element subscript text
को
define
करताहै।
<span>This text is <sub>subscripted</sub></span>
Output :
This text is subscripted
HTML <sup> Tag
<sup> element superscripttext
को
define
करताहै।याकहसकतेहैंकियह
power (घा
त
) को
represent
करताहै।
<span>This text is <sup>superscripted</sup></span>
Output :
This text is
superscripted
HTML Formatting Example
File : html_formatting.html
<!DOCTYPE html>
<html>
<head>
<title>Formatting elements example</title>
</head>
<body>
<div>This makes ur <u> text </u> underlined <br/>
This is a <b> bold </b> man <br/>
This is a <strong> Strong </strong> creature <br/>
I stands for <i> italics </i> <br/>
This will <em> emphasize </em> your text <br/>
This will <mark> highlight </mark> your word <br/>
Output :
This text is inserted
HTML <sub> Tag
<sub> element subscript text
को
define
करताहै।
<span>This text is <sub>subscripted</sub></span>
Output :
This text is subscripted
HTML <sup> Tag
<sup> element superscripttext
को
define
करताहै।याकहसकतेहैंकियह
power (घा
त
) को
represent
करताहै।
<span>This text is <sup>superscripted</sup></span>
Output :
This text is
superscripted
HTML Formatting Example
File : html_formatting.html
<!DOCTYPE html>
<html>
<head>
<title>Formatting elements example</title>
</head>
<body>
<div>This makes ur <u> text </u> underlined <br/>
This is a <b> bold </b> man <br/>
This is a <strong> Strong </strong> creature <br/>
I stands for <i> italics </i> <br/>
This will <em> emphasize </em> your text <br/>
This will <mark> highlight </mark> your word <br/>
This is a <small> small </small> island <br/>
This is a <big> Big </big> river <br/>
I want red color, not <del> green </del> <br/>
Please insert <ins> THIS </ins> instead of THAT <br/>
H<sub> 2 </sub> O <br/>
x <sup> 3 </sup> <br/>
I want red color, not <strike> green </strike> <br/>
This is a <tt> different </tt> font </div>
</body
</html>
I hope
अब आप
HTML
में
formatting
समझगएहोंगे।
HTML
में
heading या
का
use title
या
subtitle
को
web page
में
display
करनेकेलिएकियाजाताहै। यह
text
को
bold
और
big font
साथ
display .
HTML
में
6 type
की
headings
का
use
कियाजाताहैजिसेआप
h1 , h2 ...... h6
तकलिखसकतेहैं।
जिसमेसबसे
main heading <h1>
और सबसे
lowest heading <h6>
होतीहै।
? Headings SEO
मेंकाफी
important role play
करतीहैंइसलिएहर एक
web page
में
headings
का
use
करे।
Web page
के
title को <h1>
मेंलिखेंऔरबाकि
subheadings
केलिए अलग
-
अलग
heading tag का
use क
रें।
Note : Page में <h1>
का
use
सिर्फएकबारहीकरेंतोज्यादासहीरहेगा।
HTML Heading Example
File : html_heafing_example.html
<!DOCTYPE html>
<html>
<head>
This is a <big> Big </big> river <br/>
I want red color, not <del> green </del> <br/>
Please insert <ins> THIS </ins> instead of THAT <br/>
H<sub> 2 </sub> O <br/>
x <sup> 3 </sup> <br/>
I want red color, not <strike> green </strike> <br/>
This is a <tt> different </tt> font </div>
</body
</html>
I hope
अब आप
HTML
में
formatting
समझगएहोंगे।
HTML
में
heading या
का
use title
या
subtitle
को
web page
में
display
करनेकेलिएकियाजाताहै। यह
text
को
bold
और
big font
साथ
display .
HTML
में
6 type
की
headings
का
use
कियाजाताहैजिसेआप
h1 , h2 ...... h6
तकलिखसकतेहैं।
जिसमेसबसे
main heading <h1>
और सबसे
lowest heading <h6>
होतीहै।
? Headings SEO
मेंकाफी
important role play
करतीहैंइसलिएहर एक
web page
में
headings
का
use
करे।
Web page
के
title को <h1>
मेंलिखेंऔरबाकि
subheadings
केलिए अलग
-
अलग
heading tag का
use क
रें।
Note : Page में <h1>
का
use
सिर्फएकबारहीकरेंतोज्यादासहीरहेगा।
HTML Heading Example
File : html_heafing_example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Heading Example</title>
</head>
<body>
<h1>Heading number 1</h1>
<h2>Heading number 2</h2>
<h3>Heading number 3</h3>
<h4>Heading number 4</h4>
<h5>Heading number 5</h5>
<h6>Heading number 6</h6>
</body>
</html>
HTML
में
anchor
सबसे
important role play
करताहै।
anchor tag hyperlink define
करताहैजिसका
main purpose
किसी
page
कोदुसरे
web page
केसाथ
link
करनाहै।
For Example
हमारी
website
में
left side
मेंजो
topic list
और
header
मेंजो
courses link
दीगयीहैवे
सभी
hyperlink
हीहैं
,
जिनकीजिनकी
help
सेहमदुसरे
page
परजापातेहैं।
anchor tag को <a href="location">link name</a>
से
define
करतेहैंजिसमे
href attribute में
हीहम
use page की location (path) define
करतेहैंजिसेहमें
link
करनाहोताहै।
HTML <a> Example
<a href="/js/javascript-introduction-in-hindi">JavaScript
Introduction In Hindi</a>
Output :
JavaScript Introduction In Hindi
<title>HTML Heading Example</title>
</head>
<body>
<h1>Heading number 1</h1>
<h2>Heading number 2</h2>
<h3>Heading number 3</h3>
<h4>Heading number 4</h4>
<h5>Heading number 5</h5>
<h6>Heading number 6</h6>
</body>
</html>
HTML
में
anchor
सबसे
important role play
करताहै।
anchor tag hyperlink define
करताहैजिसका
main purpose
किसी
page
कोदुसरे
web page
केसाथ
link
करनाहै।
For Example
हमारी
website
में
left side
मेंजो
topic list
और
header
मेंजो
courses link
दीगयीहैवे
सभी
hyperlink
हीहैं
,
जिनकीजिनकी
help
सेहमदुसरे
page
परजापातेहैं।
anchor tag को <a href="location">link name</a>
से
define
करतेहैंजिसमे
href attribute में
हीहम
use page की location (path) define
करतेहैंजिसेहमें
link
करनाहोताहै।
HTML <a> Example
<a href="/js/javascript-introduction-in-hindi">JavaScript
Introduction In Hindi</a>
Output :
JavaScript Introduction In Hindi
❕ Important
अगर
href attribute blank
छोड़दिया
means
आपनेउसमेकिसीभी
page
की
location
नहींदीतोवह
link current page
कोही
link
करदेगी।
<a href="">Click Here</a>
Output :
Click Here
HTML target attribute
अब अगर आपचाहतेहैंकिनया
page
जोकि
link se connected
हैवो
new tab
में
open
होतोउसके
लि
ए
target attribute
का
use
करतेहैं। इसे
target ="_blank"
लिखतेहैं।लेकिनयहध्यानरहे
कि target attribute ह
मेशा
href attribute
केसाथही
use हो
गा।
For Example
<a href="/jquery/jquery-introduction-in-hindi"
target="_blank">JavaScript Introduction In Hindi</a>
//open current page in new tab
<a href="" target="_blank">Click Here</a>
Output :
jQuery Introduction In Hindi
Click Here
HTML empty link
अगर आप
<a> tag
में
href attribute में javascript:void() use
करतेहैंतोउसे
link void link या
empty link
कहतेहैं। ऐसी
links
पर
click
करनेपरकुछभीनहींहोताहै।
For Example
<a href="javascript:void()">Click Here</a>
Output :
Click Here
HTML में <img> tag
का
use web page
में
image show
करानेकेलिएकियाजाताहै।
<img> tage का
closing tag
नहींहोताहै।
Example
<img src="image_location">
अगर
href attribute blank
छोड़दिया
means
आपनेउसमेकिसीभी
page
की
location
नहींदीतोवह
link current page
कोही
link
करदेगी।
<a href="">Click Here</a>
Output :
Click Here
HTML target attribute
अब अगर आपचाहतेहैंकिनया
page
जोकि
link se connected
हैवो
new tab
में
open
होतोउसके
लि
ए
target attribute
का
use
करतेहैं। इसे
target ="_blank"
लिखतेहैं।लेकिनयहध्यानरहे
कि target attribute ह
मेशा
href attribute
केसाथही
use हो
गा।
For Example
<a href="/jquery/jquery-introduction-in-hindi"
target="_blank">JavaScript Introduction In Hindi</a>
//open current page in new tab
<a href="" target="_blank">Click Here</a>
Output :
jQuery Introduction In Hindi
Click Here
HTML empty link
अगर आप
<a> tag
में
href attribute में javascript:void() use
करतेहैंतोउसे
link void link या
empty link
कहतेहैं। ऐसी
links
पर
click
करनेपरकुछभीनहींहोताहै।
For Example
<a href="javascript:void()">Click Here</a>
Output :
Click Here
HTML में <img> tag
का
use web page
में
image show
करानेकेलिएकियाजाताहै।
<img> tage का
closing tag
नहींहोताहै।
Example
<img src="image_location">
src attribute
केलिए
image path
देतेसमय
folders
काध्यानरखेंअगर वह
image
किसी
folder
मेंहैतो
folder name
केसाथ
image path
दियाजाताहै।
For Example :
<img src="folder1/folder2/image">
HTML Image Attributes
src
alt
width & height
style
HTML src Attribute
<img> tag में src
सबसे
important attribute
होताहै
,
इस
attribute
की
value
मेंहीहमउस
image का
path
देतेहैंजिसे
show
करनाहोताहै।
HTML alt Attribute
tag में alt attribute
का
use image name
देनेकेलिएकियाजाताहै
,
अगरदिएगए
path /
location
पर
image
नहींहुईयाकिसीदूसरी
error
कीवजहसे
image show
नहींहुईतो
alt attribute में
दीगयी
value show
होजायगी।
For Example -
<img src="image_tiger" alt="Tiger Image">
Output :
तोकुछइसतरहसे
alt attribute work
करताहै।
HTML width and height Attribute
<img> में width & height attributes
का
use image
की
width , height fix
करनेकेलिएकियाजाता
है
।
For Example -
केलिए
image path
देतेसमय
folders
काध्यानरखेंअगर वह
image
किसी
folder
मेंहैतो
folder name
केसाथ
image path
दियाजाताहै।
For Example :
<img src="folder1/folder2/image">
HTML Image Attributes
src
alt
width & height
style
HTML src Attribute
<img> tag में src
सबसे
important attribute
होताहै
,
इस
attribute
की
value
मेंहीहमउस
image का
path
देतेहैंजिसे
show
करनाहोताहै।
HTML alt Attribute
tag में alt attribute
का
use image name
देनेकेलिएकियाजाताहै
,
अगरदिएगए
path /
location
पर
image
नहींहुईयाकिसीदूसरी
error
कीवजहसे
image show
नहींहुईतो
alt attribute में
दीगयी
value show
होजायगी।
For Example -
<img src="image_tiger" alt="Tiger Image">
Output :
तोकुछइसतरहसे
alt attribute work
करताहै।
HTML width and height Attribute
<img> में width & height attributes
का
use image
की
width , height fix
करनेकेलिएकियाजाता
है
।
For Example -
<img src="/storage/uploads/course/html_1613310520.png" alt="HTML
Image" width="150" height="150">
Output :
HTML style Attribute
इनसबकेअलावा
<img> tag
मेंआप
style attribute
काभी
use
कर सकतेहैं।हालाँकिआपचाहेतो
width , height style attribute
मेंभी
define
कर सकतेहैं।
For Example -
<img src="/storage/uploads/course/html_1613310520.png" alt="HTML
Image" style="width:150px;height150px;border:red">
Output :
I Hope
अब आपको
HTML में <img> tag
केबारेमेंअच्छीतरहसेपताचलगयाहोगा।
HTML
में
list information
या
data
की
listing
करनेकेलिएकियाजाताहै।
list
हमेंकिसीभी
data को
show
करनेका
efficient way provide
करातीहै।
HTML
में
list 3
तरहकीहोतीहै।
Ordered List
Unordered List
Description List
HTML Ordered List
Ordered List
मतलबजहाँपरहमें
data listing
केसाथ
increasing order
में
numbers
भी
show क
रने
हो
।
इसलिए इसे
Numbered list
भीकहतेहैं।
Image" width="150" height="150">
Output :
HTML style Attribute
इनसबकेअलावा
<img> tag
मेंआप
style attribute
काभी
use
कर सकतेहैं।हालाँकिआपचाहेतो
width , height style attribute
मेंभी
define
कर सकतेहैं।
For Example -
<img src="/storage/uploads/course/html_1613310520.png" alt="HTML
Image" style="width:150px;height150px;border:red">
Output :
I Hope
अब आपको
HTML में <img> tag
केबारेमेंअच्छीतरहसेपताचलगयाहोगा।
HTML
में
list information
या
data
की
listing
करनेकेलिएकियाजाताहै।
list
हमेंकिसीभी
data को
show
करनेका
efficient way provide
करातीहै।
HTML
में
list 3
तरहकीहोतीहै।
Ordered List
Unordered List
Description List
HTML Ordered List
Ordered List
मतलबजहाँपरहमें
data listing
केसाथ
increasing order
में
numbers
भी
show क
रने
हो
।
इसलिए इसे
Numbered list
भीकहतेहैं।
Ordered List
केलिएहम
<ol></ol> tags
का
use
करतेहैं। और
data listing
केलिए
<li></li> tags का
use
करतेहैं।
HTML Ordered List Example
File : html_ordered_list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Ordered List Example</title>
</head>
<body>
<ol>
<li>PHP</li>
<li>Laravel</li>
<li>JavaScript</li>
<li>JQuery</li>
<li>HTML</li>
</ol>
</body>
</html>
Output
PHP
Laravel
JavaScript
JQuery
HTML
केलिएहम
<ol></ol> tags
का
use
करतेहैं। और
data listing
केलिए
<li></li> tags का
use
करतेहैं।
HTML Ordered List Example
File : html_ordered_list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Ordered List Example</title>
</head>
<body>
<ol>
<li>PHP</li>
<li>Laravel</li>
<li>JavaScript</li>
<li>JQuery</li>
<li>HTML</li>
</ol>
</body>
</html>
Output
PHP
Laravel
JavaScript
JQuery
HTML
Example
मेंआपदेखसकतेहैंकिजोभी
listing
हुईहैउनके
sequence number
केसाथहुईहै।
HTML Unordered List
Unordered list
मेंसभी
data list number
नहोकर
bullets
केसाथदिखतेहैं। इसलिए इसे
Bullet list भी
कहतेहैं।
Unordered List
केलिएहम
<ul></ul> tags
का
use
करतेहैं। और
data listing के
लि
ए
<li></li> tags
का
use
करतेहैं।
HTML Unordered List Example
File : html_unordered_list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Unordered List Example</title>
</head>
<body>
<ul>
<li>PHP</li>
<li>Laravel</li>
<li>JavaScript</li>
<li>JQuery</li>
<li>HTML</li>
</ul>
</body>
</html>
Output
PHP
Laravel
JavaScript
मेंआपदेखसकतेहैंकिजोभी
listing
हुईहैउनके
sequence number
केसाथहुईहै।
HTML Unordered List
Unordered list
मेंसभी
data list number
नहोकर
bullets
केसाथदिखतेहैं। इसलिए इसे
Bullet list भी
कहतेहैं।
Unordered List
केलिएहम
<ul></ul> tags
का
use
करतेहैं। और
data listing के
लि
ए
<li></li> tags
का
use
करतेहैं।
HTML Unordered List Example
File : html_unordered_list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Unordered List Example</title>
</head>
<body>
<ul>
<li>PHP</li>
<li>Laravel</li>
<li>JavaScript</li>
<li>JQuery</li>
<li>HTML</li>
</ul>
</body>
</html>
Output
PHP
Laravel
JavaScript
JQuery
HTML
HTML Description List
HTML Description List
भीहम
listing
केलिएकर सकतेहैं
, Description List
को
Definition List भी
कहतेहैं। इसका
structure
कुछ
directory
जैसाहोताहै।
Description List
हमतब
use
करतेहैंजबकिसी
term
केबारेमेंछोटी
-
छोटी
definition show क
राना
करनाचाहतेहो। इसके
3 main tags
होतेहैं।
<dl> -
जो
define
करताहैकि
definition list start
होरहीहै।
<dt> -
यह
data term define
करताहै
,
जिसकेबारेमेंहमें
definition define
करनीहै।
<dd> -
या
data definition definition define
करताहै।
HTML Description List Example
File : html_description_list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Description List Example</title>
</head>
<body>
<dl>
<dt>PHP</dt>
<dd> - A open sources, object oriented, cross platform , server side,
scripting language.</dd>
<dt>JavaScript</dt>
<dd> - A open sources, object oriented, cross platform , client side,
scripting language</dd>
<dt>jQuery</dt>
HTML
HTML Description List
HTML Description List
भीहम
listing
केलिएकर सकतेहैं
, Description List
को
Definition List भी
कहतेहैं। इसका
structure
कुछ
directory
जैसाहोताहै।
Description List
हमतब
use
करतेहैंजबकिसी
term
केबारेमेंछोटी
-
छोटी
definition show क
राना
करनाचाहतेहो। इसके
3 main tags
होतेहैं।
<dl> -
जो
define
करताहैकि
definition list start
होरहीहै।
<dt> -
यह
data term define
करताहै
,
जिसकेबारेमेंहमें
definition define
करनीहै।
<dd> -
या
data definition definition define
करताहै।
HTML Description List Example
File : html_description_list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Description List Example</title>
</head>
<body>
<dl>
<dt>PHP</dt>
<dd> - A open sources, object oriented, cross platform , server side,
scripting language.</dd>
<dt>JavaScript</dt>
<dd> - A open sources, object oriented, cross platform , client side,
scripting language</dd>
<dt>jQuery</dt>
<dd> - A JavaScript Library</dd>
<dt>HTML</dt>
<dd> - Hyper Text Markup Language.</dd>
</dl>
</body>
</html>
Output
PHP
- A open sources, object oriented, cross platform , server side, scripting language.
JavaScript
- A open sources, object oriented, cross platform , client side, scripting language
jQuery
- A JavaScript Library
HTML
- Hyper Text Markup Language.
HTML
मेंजबहमें
tabular form
में
data show
करानाहोताहैतब
table
का
use
करतेहैं।
Basically Table
में
data row , columns
में
data display
कियाजाताहै।
HTML
में
table
बनानेकेलिए
<table> tag
का
use
कियाजाताहै
, rows
को
represent
करनेके
लि
ए
<tr> Tag
का
use
कियाजाताहैऔर
columns
को
represent
करनेकेलिए
<td> tag ka use कि
या
जाताहै।
HTML Table Tags
Tag NameUses
<table>
यह
table
कोबनानेकेलिए
use
कियाजाताहै।
<thead>
यह
table head
को
represent
करताहै।
<dt>HTML</dt>
<dd> - Hyper Text Markup Language.</dd>
</dl>
</body>
</html>
Output
PHP
- A open sources, object oriented, cross platform , server side, scripting language.
JavaScript
- A open sources, object oriented, cross platform , client side, scripting language
jQuery
- A JavaScript Library
HTML
- Hyper Text Markup Language.
HTML
मेंजबहमें
tabular form
में
data show
करानाहोताहैतब
table
का
use
करतेहैं।
Basically Table
में
data row , columns
में
data display
कियाजाताहै।
HTML
में
table
बनानेकेलिए
<table> tag
का
use
कियाजाताहै
, rows
को
represent
करनेके
लि
ए
<tr> Tag
का
use
कियाजाताहैऔर
columns
को
represent
करनेकेलिए
<td> tag ka use कि
या
जाताहै।
HTML Table Tags
Tag NameUses
<table>
यह
table
कोबनानेकेलिए
use
कियाजाताहै।
<thead>
यह
table head
को
represent
करताहै।
Tag NameUses
<th>
यह
table head data
को
represent
करताहै।
<tr>
या
table row
को
represent
करताहै।
<td>
यह
table column
को
represent
करताहै।
<tbody>
यह
table body
को
define
करताहै
,
जिसमेहमें
actual information show
करानीहोतीयही।
<tfoot>
यह
table footer
को
define
करताहै।
तोयेकुछ
important table tags
हैंजिनका
use
हम
HTML
में
table print
करनेकेलिएकरतेहैं।
HTML Table Example
File : html_table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Table Example</title>
</head>
<body>
<table border="1">
<thead><tr><th>Language Name</th><th>Uses</th></tr></thead>
<tbody>
<tr>
<td>PHP</td>
<td>An open sources, object oriented, cross platform , server side,
scripting language.</td>
</tr>
<tr>
<th>
यह
table head data
को
represent
करताहै।
<tr>
या
table row
को
represent
करताहै।
<td>
यह
table column
को
represent
करताहै।
<tbody>
यह
table body
को
define
करताहै
,
जिसमेहमें
actual information show
करानीहोतीयही।
<tfoot>
यह
table footer
को
define
करताहै।
तोयेकुछ
important table tags
हैंजिनका
use
हम
HTML
में
table print
करनेकेलिएकरतेहैं।
HTML Table Example
File : html_table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Table Example</title>
</head>
<body>
<table border="1">
<thead><tr><th>Language Name</th><th>Uses</th></tr></thead>
<tbody>
<tr>
<td>PHP</td>
<td>An open sources, object oriented, cross platform , server side,
scripting language.</td>
</tr>
<tr>
<td>Laravel</td>
<td>A PHP Framework use to develop web applications.</td>
</tr>
<tr>
<td>JavaScript</td>
<td>An open sources, object oriented, cross platform , client side,
scripting language</td>
</tr>
<tr>
<td>JQuery</td>
<td>A JavaScript Library</td>
</tr>
<tr>
<td>HTML</td>
<td>Hyper Text Markup Language use to devlope web pages.</td>
</tr>
</tbody>
<tfoot><tr><th>Language Name</th><th>Uses</th></tr></tfoot>
</table>
</body>
</html>
Output
Language
Name
Uses
PHP
An open sources, object oriented, cross platform , server side, scripting
language.
Laravel A PHP Framework use to develop web applications.
<td>A PHP Framework use to develop web applications.</td>
</tr>
<tr>
<td>JavaScript</td>
<td>An open sources, object oriented, cross platform , client side,
scripting language</td>
</tr>
<tr>
<td>JQuery</td>
<td>A JavaScript Library</td>
</tr>
<tr>
<td>HTML</td>
<td>Hyper Text Markup Language use to devlope web pages.</td>
</tr>
</tbody>
<tfoot><tr><th>Language Name</th><th>Uses</th></tr></tfoot>
</table>
</body>
</html>
Output
Language
Name
Uses
PHP
An open sources, object oriented, cross platform , server side, scripting
language.
Laravel A PHP Framework use to develop web applications.
Language
Name
Uses
JavaScript
An open sources, object oriented, cross platform , client side, scripting
language
JQuery A JavaScript Library
HTML Hyper Text Markup Language use to devlope web pages.
Language
Name
Uses
Example
मेंहालाँकि
<table> tag
मेंएक
border use
कियागयाहैजिससे
row , columns
को
easily दे
खा
जासके।
HTML rowspan Attribute
rowspan attribute
का
use
हमतबकरतेहैंजबहमें
1
सेज्यादा
rows
को
single row
मेंदिखानाहोता
है
।
हालाँकियह
attribute सि
र्फ
<td> , <th> में
हीलगताहै।
HTML rowspan Example
File : html_rowspan.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Table Example</title>
</head>
<body>
<table border="1">
<thead><tr><th>Language Name</th><th>Uses</th></tr></thead>
<tbody>
Name
Uses
JavaScript
An open sources, object oriented, cross platform , client side, scripting
language
JQuery A JavaScript Library
HTML Hyper Text Markup Language use to devlope web pages.
Language
Name
Uses
Example
मेंहालाँकि
<table> tag
मेंएक
border use
कियागयाहैजिससे
row , columns
को
easily दे
खा
जासके।
HTML rowspan Attribute
rowspan attribute
का
use
हमतबकरतेहैंजबहमें
1
सेज्यादा
rows
को
single row
मेंदिखानाहोता
है
।
हालाँकियह
attribute सि
र्फ
<td> , <th> में
हीलगताहै।
HTML rowspan Example
File : html_rowspan.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Table Example</title>
</head>
<body>
<table border="1">
<thead><tr><th>Language Name</th><th>Uses</th></tr></thead>
<tbody>
<tr>
<td rowspan="2">PHP & Laravel</td>
<td>An open sources, object oriented, cross platform , server side,
scripting language.</td>
</tr>
<tr>
<td>Laravel is a PHP Framework use to develop web applications.</td>
</tr>
<tr>
<td>JavaScript</td>
<td>An open sources, object oriented, cross platform , client side,
scripting language</td>
</tr>
</tbody>
</table>
</body>
</html>
utput
Language
Name
Uses
PHP & Laravel
An open sources, object oriented, cross platform , server side, scripting
language.
Laravel is a PHP Framework use to develop web applications.
JavaScript
An open sources, object oriented, cross platform , client side, scripting
language
<td rowspan="2">PHP & Laravel</td>
<td>An open sources, object oriented, cross platform , server side,
scripting language.</td>
</tr>
<tr>
<td>Laravel is a PHP Framework use to develop web applications.</td>
</tr>
<tr>
<td>JavaScript</td>
<td>An open sources, object oriented, cross platform , client side,
scripting language</td>
</tr>
</tbody>
</table>
</body>
</html>
utput
Language
Name
Uses
PHP & Laravel
An open sources, object oriented, cross platform , server side, scripting
language.
Laravel is a PHP Framework use to develop web applications.
JavaScript
An open sources, object oriented, cross platform , client side, scripting
language
example
मेंआपदेखसकतेहैंकि
2 rows
कोएकसाथमिलाकर एक
single row
बनाईहैहालाँकिआप
अपने
need
के
according
कितनीही
row
को
single row
बनासकतेहैं।
❕ Important
इसेहमजिस
column
में
apply
करतेहैंसिर्फउसी
column
केलिए
rows merge
होकर
single row ब
नती
है। ऐसानहींकिआप एक
column
में
rowspan
लिखकर
complete row merge हों
गी।
HTML colspan Attribute
colspan attribute
का
use
हमतबकरतेहैंजबहमें
1
सेज्यादा
columns
को
single column
मेंदिखाना
होताहै। यह
attribute
भीसिर्फ
<td> , <th>
मेंहीलगताहै।
HTMl colspan Example
File : html_colspan.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Table Example</title>
</head>
<body>
<table border="2">
<tbody>
<tr><td colspan="2">Web Devlopment Languages</td></tr>
<tr><th>Language Name</th><th>Uses</th></tr>
<tr>
<td>PHP</td><td>An open sources, object oriented, cross
platform , server side, scripting language.</td>
</tr>
<tr>
<td>Laravel</td><td>A PHP Framework use to develop
web applications.</td>
</tr>
मेंआपदेखसकतेहैंकि
2 rows
कोएकसाथमिलाकर एक
single row
बनाईहैहालाँकिआप
अपने
need
के
according
कितनीही
row
को
single row
बनासकतेहैं।
❕ Important
इसेहमजिस
column
में
apply
करतेहैंसिर्फउसी
column
केलिए
rows merge
होकर
single row ब
नती
है। ऐसानहींकिआप एक
column
में
rowspan
लिखकर
complete row merge हों
गी।
HTML colspan Attribute
colspan attribute
का
use
हमतबकरतेहैंजबहमें
1
सेज्यादा
columns
को
single column
मेंदिखाना
होताहै। यह
attribute
भीसिर्फ
<td> , <th>
मेंहीलगताहै।
HTMl colspan Example
File : html_colspan.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Table Example</title>
</head>
<body>
<table border="2">
<tbody>
<tr><td colspan="2">Web Devlopment Languages</td></tr>
<tr><th>Language Name</th><th>Uses</th></tr>
<tr>
<td>PHP</td><td>An open sources, object oriented, cross
platform , server side, scripting language.</td>
</tr>
<tr>
<td>Laravel</td><td>A PHP Framework use to develop
web applications.</td>
</tr>
<tr>
<td>JavaScript</td><td>An open sources, object oriented,
cross platform , client side, scripting language</td>
</tr>
<tr>
<td>JQuery</td><td>A JavaScript Library</td>
</tr>
<tr>
<td>HTML</td><td>Hyper Text Markup Language use to
devlope web pages.</td>
</tr>
</tbody>
</table>
</body>
</html>
Output
Web Devlopment Languages
Language
Name
Uses
PHP
An open sources, object oriented, cross platform , server side, scripting
language.
Laravel A PHP Framework use to develop web applications.
JavaScript
An open sources, object oriented, cross platform , client side, scripting
language
JQuery A JavaScript Library
HTML Hyper Text Markup Language use to devlope web pages.
<td>JavaScript</td><td>An open sources, object oriented,
cross platform , client side, scripting language</td>
</tr>
<tr>
<td>JQuery</td><td>A JavaScript Library</td>
</tr>
<tr>
<td>HTML</td><td>Hyper Text Markup Language use to
devlope web pages.</td>
</tr>
</tbody>
</table>
</body>
</html>
Output
Web Devlopment Languages
Language
Name
Uses
PHP
An open sources, object oriented, cross platform , server side, scripting
language.
Laravel A PHP Framework use to develop web applications.
JavaScript
An open sources, object oriented, cross platform , client side, scripting
language
JQuery A JavaScript Library
HTML Hyper Text Markup Language use to devlope web pages.
हालाँकिआप
CSS
ला
use
करके
Table
और अच्छाबनासकतेहैं।
I Hope
अब आपको
HTML
में
Table के
बारेमेंअच्छेसेसमझ आगयाहोगा।
HTML
में
Form
बनानेकेलिए
<form> tag
का
use
कियाजाताहै।
Form
की
help
सेहमअलगअलगतरह
का
user data like name , age , address etc ... server
पर
processing
केलिए
send
कर सकतेहैं।
मतलबजबहम
web development
करतेहैंतोहमेंकईतरहका
data database
मेंयाकिसीदूसरी
process
केलिए
form
कीकरूरतपड़तीहै।
Form data handle
करनेकेलिएहैं
server side language
जैसेकि
PHP , Java , Python etc ... की
जरूरतपड़तीहै। इनमेसे
PHP
कोआपहमरी
website
सेपढ़ सकतेहैं।
HTML <form> Tag
जिसतरह
table
या
list create
करनेकेलिएहम
<table></table> tags
केअंदर
content
लिखतेहैं
उसीतरहसेकिसीभी
web page
में
form create
करनेकेलिए
<form></form> tag
का
use कि
या
जाताहै
|
यहएकतरहसे
container
होताहैजो
HTML form
का
starting and ending
होताहै।
form
tag
केअंदरहीहमसभी
inputs (like : input , textarea , checkbox etc..)
लिखतेहैं। पर
form tag
केकुछ
attributes
भीहोतेहै
|
HTML Form Syntax
<form action="path" method="get/post">
...your other fields
</form>
Form Attributes
Form
को
handle
करनेकेलिए
HTML
मेंकुछ
form attributes
इस प्रकारहैं
-
HTML form action Attribute
action attribute
सेहम
form
की
location define
करतेहै
means form submit
होनेकेबादहमकिस
location
पर
form
केसाथ
submit data
को
handle
करेंगे।वो
location ह
म
action attribute
मेंदेतेहैं।
CSS
ला
use
करके
Table
और अच्छाबनासकतेहैं।
I Hope
अब आपको
HTML
में
Table के
बारेमेंअच्छेसेसमझ आगयाहोगा।
HTML
में
Form
बनानेकेलिए
<form> tag
का
use
कियाजाताहै।
Form
की
help
सेहमअलगअलगतरह
का
user data like name , age , address etc ... server
पर
processing
केलिए
send
कर सकतेहैं।
मतलबजबहम
web development
करतेहैंतोहमेंकईतरहका
data database
मेंयाकिसीदूसरी
process
केलिए
form
कीकरूरतपड़तीहै।
Form data handle
करनेकेलिएहैं
server side language
जैसेकि
PHP , Java , Python etc ... की
जरूरतपड़तीहै। इनमेसे
PHP
कोआपहमरी
website
सेपढ़ सकतेहैं।
HTML <form> Tag
जिसतरह
table
या
list create
करनेकेलिएहम
<table></table> tags
केअंदर
content
लिखतेहैं
उसीतरहसेकिसीभी
web page
में
form create
करनेकेलिए
<form></form> tag
का
use कि
या
जाताहै
|
यहएकतरहसे
container
होताहैजो
HTML form
का
starting and ending
होताहै।
form
tag
केअंदरहीहमसभी
inputs (like : input , textarea , checkbox etc..)
लिखतेहैं। पर
form tag
केकुछ
attributes
भीहोतेहै
|
HTML Form Syntax
<form action="path" method="get/post">
...your other fields
</form>
Form Attributes
Form
को
handle
करनेकेलिए
HTML
मेंकुछ
form attributes
इस प्रकारहैं
-
HTML form action Attribute
action attribute
सेहम
form
की
location define
करतेहै
means form submit
होनेकेबादहमकिस
location
पर
form
केसाथ
submit data
को
handle
करेंगे।वो
location ह
म
action attribute
मेंदेतेहैं।
HTML Form method Attribute
method attribute
केद्वाराहम
define
करतेहैंकि
form
किसतरहकी
request
बनाएगा।
basically
request 2
तरहकीहोतीहै
- get और post . By default form get type
के
method
केसाथ
submit
होताहै
means
अगर आप
method attribute define
नहींभीकरतेहैंतोभी
form get type
कीही
request
केसाथ
submit हो
गा।
post type
की
request
केसाथ
form submit
करनेकेलिए आपको
method="post"
लिखनाहीपड़ेगा।
HTML Form Example
File : html_form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Table Example</title>
</head>
<body>
<form action="location" method="post">
<label>First Name</label>
<input type="text" name="fname" placeholder="Enter Your First Name">
<label>Last Name</label>
<input type="text" name="lname" placeholder="Enter Your Last Name">
<button type="submit">Submit</button>
</form>
</body>
</html>
method attribute
केद्वाराहम
define
करतेहैंकि
form
किसतरहकी
request
बनाएगा।
basically
request 2
तरहकीहोतीहै
- get और post . By default form get type
के
method
केसाथ
submit
होताहै
means
अगर आप
method attribute define
नहींभीकरतेहैंतोभी
form get type
कीही
request
केसाथ
submit हो
गा।
post type
की
request
केसाथ
form submit
करनेकेलिए आपको
method="post"
लिखनाहीपड़ेगा।
HTML Form Example
File : html_form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Table Example</title>
</head>
<body>
<form action="location" method="post">
<label>First Name</label>
<input type="text" name="fname" placeholder="Enter Your First Name">
<label>Last Name</label>
<input type="text" name="lname" placeholder="Enter Your Last Name">
<button type="submit">Submit</button>
</form>
</body>
</html>
हा
लाँकि
different - different data के
लिए
different - different form inputs हो
ते हैं जिन्हे आप
next
topic में
detail में
पढ़ेंगे।
Example में <lable> का
use input के
labeling के
लिए किया गया है और
input
tag का
use data enter क
रने के लिए है जिसका
type text है
means इस input में
हम
string / text input
क
र सकते हैं।
अ
गर आप जाना कहते हैं कि
form को
कैसे
handle क
रते हैं तो आप
PHP का
topic Form Handling पढ़ स
कते
हैं
।
तो
कुछ इस तरह से
HTML में
हम
forms ब
नाते हैं
, next topic में
हम
different - different form input के
बा
रे में पढ़ेंगे।
पिछले
topic
मेंआपने
Form
केबारेमेंपढ़ाइस
topic
मेंहम
form inputs
केबारेमेंपढ़ेंगे।
HTML में
different - different data inputs
केलिए
different - different type
के
Form elements use
कियेजाते
हैं।जोकिइस प्रकारहैं
-
Form
Elements Uses
<label>
इसका
use
किसी
input / select
के
name
को
represent
करनेकेलिएकियाजाताहैजिससेयेमालूमहोसकेकीवो
बारेमेंहैं।
<input> form
में
input
का
use (date , time , text , numeric , radio , checkbox, url, email) data fill
करनेकेलिएकियाजाताहै।
<select>
जबहमेंदीगयीलिस्टमेंसेकोई एक
option select
करनाहोतब इसका
use
कियाजाताहै।
<option> य
ह
<select> element
केसाथ
use
होताहैकिसी
predefined list
मेंसेकिसीएक
option
को
select
करनेकेलिए।
<textarea>
जबहमनेबहुतबड़ा
content input
करनाहोतो
textarea
का
use
कियाजाताहै।
<fieldset>
इस
tag
का
use form elements
को
group
करनेकेलिएकियाजाताहै।
<legend>
इसका
use <fieldset> tag
केलिए
as a label
कियाजाताहै
,
याकसासहतेहैंकि
group fields
का
label define
कियाजाताहै।
<button> form
मेंकोई
clickable button show
करनेकेलिए।
HTML Form Example
File : html_form_elements.html
लाँकि
different - different data के
लिए
different - different form inputs हो
ते हैं जिन्हे आप
next
topic में
detail में
पढ़ेंगे।
Example में <lable> का
use input के
labeling के
लिए किया गया है और
input
tag का
use data enter क
रने के लिए है जिसका
type text है
means इस input में
हम
string / text input
क
र सकते हैं।
अ
गर आप जाना कहते हैं कि
form को
कैसे
handle क
रते हैं तो आप
PHP का
topic Form Handling पढ़ स
कते
हैं
।
तो
कुछ इस तरह से
HTML में
हम
forms ब
नाते हैं
, next topic में
हम
different - different form input के
बा
रे में पढ़ेंगे।
पिछले
topic
मेंआपने
Form
केबारेमेंपढ़ाइस
topic
मेंहम
form inputs
केबारेमेंपढ़ेंगे।
HTML में
different - different data inputs
केलिए
different - different type
के
Form elements use
कियेजाते
हैं।जोकिइस प्रकारहैं
-
Form
Elements Uses
<label>
इसका
use
किसी
input / select
के
name
को
represent
करनेकेलिएकियाजाताहैजिससेयेमालूमहोसकेकीवो
बारेमेंहैं।
<input> form
में
input
का
use (date , time , text , numeric , radio , checkbox, url, email) data fill
करनेकेलिएकियाजाताहै।
<select>
जबहमेंदीगयीलिस्टमेंसेकोई एक
option select
करनाहोतब इसका
use
कियाजाताहै।
<option> य
ह
<select> element
केसाथ
use
होताहैकिसी
predefined list
मेंसेकिसीएक
option
को
select
करनेकेलिए।
<textarea>
जबहमनेबहुतबड़ा
content input
करनाहोतो
textarea
का
use
कियाजाताहै।
<fieldset>
इस
tag
का
use form elements
को
group
करनेकेलिएकियाजाताहै।
<legend>
इसका
use <fieldset> tag
केलिए
as a label
कियाजाताहै
,
याकसासहतेहैंकि
group fields
का
label define
कियाजाताहै।
<button> form
मेंकोई
clickable button show
करनेकेलिए।
HTML Form Example
File : html_form_elements.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Table Example</title>
</head>
<body>
<form>
<fieldset>
<legend>Personal Info:</legend>
<label>Full Name:</label><br>
<input type="text" name="fname" placeholder="Enter Your Full Name"><br><br>
<label>Gender</label><br>
<select name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select><br><br>
<label>About You</label><br>
<textarea name="about_you" placeholder="Tell more about yourself"
rows="4"></textarea><br>
</fieldset> <br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output
<html>
<head>
<meta charset="utf-8">
<title>HTML Table Example</title>
</head>
<body>
<form>
<fieldset>
<legend>Personal Info:</legend>
<label>Full Name:</label><br>
<input type="text" name="fname" placeholder="Enter Your Full Name"><br><br>
<label>Gender</label><br>
<select name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select><br><br>
<label>About You</label><br>
<textarea name="about_you" placeholder="Tell more about yourself"
rows="4"></textarea><br>
</fieldset> <br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output
Personal Info:Full Name:
Gender
About You
बैसेतो
<input>
की
type attribute
केलिएकईसाड़ी
values
होतीहैंजिन्हेआप
next chapter
मेंपढोगे।
Form में <input type=" ">
बहुतही
important element
है
,input type
का
use (date , time , text ,
numeric , radio , checkbox, url, email) data fill
करनेकेलिएकियाजाताहै।
नीचे
type attribute
केलिए सभी
values
और उनके
uses
केबारेमेंबतायागयाहै।
Attribute
Value Description
text
इसमें
single line
केलिए
text input field
बनानेकेलिएकियाजाताहै।
password
यह
input field
को
as a password field
बनानेकेलिएकियाजाताहै
,
जिसमेकुछभी
enter
करनेपर
******
submit
यह
form submit
करनेकेलिए
button
बनानेमेंकामकरताहै।
reset
यह
form
केसभी
input fields
को
reset
करनेकेलिए
reset button define
करताहै।
radio
यह
radio button define
करताहैजिसमेसेकोई एक
option select
कियाजाताहै।
checkbox
यह
checkbox define
करताहैजिसमेसेहम
multiple options choose
कर सकतेहैं।
file
यह
file input define
करताहै
,
जिससेहम
file
को
upload
कर सके।
color
यह
color input
बनानेकेकामआताहै।
Submit
Gender
About You
बैसेतो
<input>
की
type attribute
केलिएकईसाड़ी
values
होतीहैंजिन्हेआप
next chapter
मेंपढोगे।
Form में <input type=" ">
बहुतही
important element
है
,input type
का
use (date , time , text ,
numeric , radio , checkbox, url, email) data fill
करनेकेलिएकियाजाताहै।
नीचे
type attribute
केलिए सभी
values
और उनके
uses
केबारेमेंबतायागयाहै।
Attribute
Value Description
text
इसमें
single line
केलिए
text input field
बनानेकेलिएकियाजाताहै।
password
यह
input field
को
as a password field
बनानेकेलिएकियाजाताहै
,
जिसमेकुछभी
enter
करनेपर
******
submit
यह
form submit
करनेकेलिए
button
बनानेमेंकामकरताहै।
reset
यह
form
केसभी
input fields
को
reset
करनेकेलिए
reset button define
करताहै।
radio
यह
radio button define
करताहैजिसमेसेकोई एक
option select
कियाजाताहै।
checkbox
यह
checkbox define
करताहैजिसमेसेहम
multiple options choose
कर सकतेहैं।
file
यह
file input define
करताहै
,
जिससेहम
file
को
upload
कर सके।
color
यह
color input
बनानेकेकामआताहै।
Submit
Attribute
Value Description
date
इसका
use input date field define
करनेमेंहोताहै
,
जिससेहम
date select
कर सकतेहैं।
/td>
number
यह
numeric field define
करताहैजिससेहम
numbers
ही
enter
कर सकतेहैं।
url
यह
url input define
करताहैजिसमेकिसीभी
website
का
url enter
कर सकतेहैं।
HTML type="text"
इसमें
single line
केलिए
text input field
बनानेकेलिएकियाजाताहै।मतलबजबहमें
input
में
limited
text
जैसे
name etc ..
केलिए
input
बनानाहोतोवहांपर
input type="text" ka use
कियाजाताहै।
For Example-
<label>First Name</label>
<input type="text" name="fname" placeholder="Enter First Name">
<label>Last Name</label>
<input type="text" name="lname" placeholder="Enter Last Name">
Output :
First Name Last Name
HTML type="email"
email enter
करनेकेलिए
input type
में
email
लिखनाहोताहै।
Example -
<label>Your Email</label>
<input type="email" name="email" placeholder="Enter Email">
Output :
Your Email
HTML type="password"
यह
input field
को
as a password field
बनानेकेलिएकियाजाताहै
,
जिसमेकुछभी
enter
करनेपर
******
दिखाईदेताहै।
Example -
<label>Password</label>
Value Description
date
इसका
use input date field define
करनेमेंहोताहै
,
जिससेहम
date select
कर सकतेहैं।
/td>
number
यह
numeric field define
करताहैजिससेहम
numbers
ही
enter
कर सकतेहैं।
url
यह
url input define
करताहैजिसमेकिसीभी
website
का
url enter
कर सकतेहैं।
HTML type="text"
इसमें
single line
केलिए
text input field
बनानेकेलिएकियाजाताहै।मतलबजबहमें
input
में
limited
text
जैसे
name etc ..
केलिए
input
बनानाहोतोवहांपर
input type="text" ka use
कियाजाताहै।
For Example-
<label>First Name</label>
<input type="text" name="fname" placeholder="Enter First Name">
<label>Last Name</label>
<input type="text" name="lname" placeholder="Enter Last Name">
Output :
First Name Last Name
HTML type="email"
email enter
करनेकेलिए
input type
में
लिखनाहोताहै।
Example -
<label>Your Email</label>
<input type="email" name="email" placeholder="Enter Email">
Output :
Your Email
HTML type="password"
यह
input field
को
as a password field
बनानेकेलिएकियाजाताहै
,
जिसमेकुछभी
enter
करनेपर
******
दिखाईदेताहै।
Example -
<label>Password</label>
<input type="password" name="password" placeholder="Enter
Password">
Output :
Password
HTML type="radio"
यह
radio button define
करताहैजिसमेसेकोई एक
option select
कियाजाताहै। यहभीकई
options
मेंसेकोई एक
option select
करानेका अच्छातरीकाहै।
Example -
<label>Male</label>
<input type="radio" name="gender" value="Male">
<label>Female</label>
<input type="radio" name="gender" value="Female">
<label>Other</label>
<input type="radio" name="gender" value="Other">
Output :
Male Female Other
यहांपर ध्यानदेनेवालीबातयेहैकिसभी
inputs
में
value predefined
होगीऔर
input
कके
name
same
हीहोनेचाहिए
,
जैसेकि
example
मेंदिखायागयाहै।
HTML type="checkbox"
यह
checkbox define
करताहैजिसमेसेहम
multiple options choose
कर सकतेहैं।
Example -
<label>Your Hobbies</label><br>
<label>Swimming</label>
<input type="checkbox" name="hobbies[]" value="Swimming">
<label>Cooking</label>
Password">
Output :
Password
HTML type="radio"
यह
radio button define
करताहैजिसमेसेकोई एक
option select
कियाजाताहै। यहभीकई
options
मेंसेकोई एक
option select
करानेका अच्छातरीकाहै।
Example -
<label>Male</label>
<input type="radio" name="gender" value="Male">
<label>Female</label>
<input type="radio" name="gender" value="Female">
<label>Other</label>
<input type="radio" name="gender" value="Other">
Output :
Male Female Other
यहांपर ध्यानदेनेवालीबातयेहैकिसभी
inputs
में
value predefined
होगीऔर
input
कके
name
same
हीहोनेचाहिए
,
जैसेकि
example
मेंदिखायागयाहै।
HTML type="checkbox"
यह
checkbox define
करताहैजिसमेसेहम
multiple options choose
कर सकतेहैं।
Example -
<label>Your Hobbies</label><br>
<label>Swimming</label>
<input type="checkbox" name="hobbies[]" value="Swimming">
<label>Cooking</label>
<input type="checkbox" name="hobbies[]"
value="Cooking">
<label>Eating</label>
<input type="checkbox" name="hobbies[]"
value="Eating">
<label>Music</label>
<input type="checkbox" name="hobbies[]"
value="Music">
<label>Movies</label>
<input type="checkbox" name="hobbies[]" value="Movies">
Output :
Your Hobbies
Swimming Cooking Eating Music Movies
Note -
चूंकि
checkbox
का
use multiple choices select
करनेकेलिएकियाजाताहै
,
इसलिए इसका
name as a array define
करनाहोताहै।जिससे
server side
परहमें
selected values
का
array मि
लता
है
।
HTML type="file"
यह
file input define
करताहै
,
जिससेहम
file
को
upload
कर सके।
Example -
<label>Upload Image</label>
<input type="file" name="profile_image">
Output :
Upload Image
HTML type="color"
यह
color input
बनानेकेकामआताहै।
select
कियेजानेवाले
color
कीआपको
hexadeciamal value
मिलतीहै।
Example -
value="Cooking">
<label>Eating</label>
<input type="checkbox" name="hobbies[]"
value="Eating">
<label>Music</label>
<input type="checkbox" name="hobbies[]"
value="Music">
<label>Movies</label>
<input type="checkbox" name="hobbies[]" value="Movies">
Output :
Your Hobbies
Swimming Cooking Eating Music Movies
Note -
चूंकि
checkbox
का
use multiple choices select
करनेकेलिएकियाजाताहै
,
इसलिए इसका
name as a array define
करनाहोताहै।जिससे
server side
परहमें
selected values
का
array मि
लता
है
।
HTML type="file"
यह
file input define
करताहै
,
जिससेहम
file
को
upload
कर सके।
Example -
<label>Upload Image</label>
<input type="file" name="profile_image">
Output :
Upload Image
HTML type="color"
यह
color input
बनानेकेकामआताहै।
select
कियेजानेवाले
color
कीआपको
hexadeciamal value
मिलतीहै।
Example -
<label>Select Color</label>
<input type="color" name="input_name">
Output :
Select Color
HTML type="number"
यह
numeric field define
करताहैजिससेहम
numbers
ही
enter
कर सकतेहैं।
Example -
<label>Your Age</label>
<input type="number" name="age" placeholder="Enter Your Age">
Output :
Your Age
HTML type="date"
जबहमें
date enter
करानेकेलिए
input
बनानाहोतोवहांपर
input type = "date" use
करतेहैं।
Example -
<label>Your DOB</label>
<input type="date" name="dob" placeholder="Choose Your DOB">
Output :
Your DOB
Complete Example
File : html_form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML FORM Example</title>
</head>
<body>
<input type="color" name="input_name">
Output :
Select Color
HTML type="number"
यह
numeric field define
करताहैजिससेहम
numbers
ही
enter
कर सकतेहैं।
Example -
<label>Your Age</label>
<input type="number" name="age" placeholder="Enter Your Age">
Output :
Your Age
HTML type="date"
जबहमें
date enter
करानेकेलिए
input
बनानाहोतोवहांपर
input type = "date" use
करतेहैं।
Example -
<label>Your DOB</label>
<input type="date" name="dob" placeholder="Choose Your DOB">
Output :
Your DOB
Complete Example
File : html_form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML FORM Example</title>
</head>
<body>
<form>
<label>First Name:</label>
<input type="text" name="fname" placeholder="Enter First Name"><br><br>
<label>Last Name:</label>
<input type="text" name="lname" placeholder="Enter Last Name"> <br><br>
<label>Your Email:</label>
<input type="email" name="email" placeholder="Enter Email"> <br><br>
<label>Password:</label>
<input type="password" name="password" placeholder="Enter Password"><br><br>
<label>Gender:</label><br>
<label>Male</label>
<input type="radio" name="gender" value="Male">
<label>Female</label>
<input type="radio" name="gender" value="Female">
<label>Other</label>
<input type="radio" name="gender" value="Other"> <br><br>
<label>Your Hobbies</label><br>
<label>Swimming</label>
<input type="checkbox" name="hobbies[]" value="Swimming">
<label>Cooking</label>
<input type="checkbox" name="hobbies[]" value="Cooking">
<label>Eating</label>
<input type="checkbox" name="hobbies[]" value="Eating">
<label>Music</label>
<input type="checkbox" name="hobbies[]" value="Music">
<label>Movies</label>
<input type="checkbox" name="hobbies[]" value="Movies"> <br><br>
<label>First Name:</label>
<input type="text" name="fname" placeholder="Enter First Name"><br><br>
<label>Last Name:</label>
<input type="text" name="lname" placeholder="Enter Last Name"> <br><br>
<label>Your Email:</label>
<input type="email" name="email" placeholder="Enter Email"> <br><br>
<label>Password:</label>
<input type="password" name="password" placeholder="Enter Password"><br><br>
<label>Gender:</label><br>
<label>Male</label>
<input type="radio" name="gender" value="Male">
<label>Female</label>
<input type="radio" name="gender" value="Female">
<label>Other</label>
<input type="radio" name="gender" value="Other"> <br><br>
<label>Your Hobbies</label><br>
<label>Swimming</label>
<input type="checkbox" name="hobbies[]" value="Swimming">
<label>Cooking</label>
<input type="checkbox" name="hobbies[]" value="Cooking">
<label>Eating</label>
<input type="checkbox" name="hobbies[]" value="Eating">
<label>Music</label>
<input type="checkbox" name="hobbies[]" value="Music">
<label>Movies</label>
<input type="checkbox" name="hobbies[]" value="Movies"> <br><br>
<label>Upload Image</label>
<input type="file" name="profile_image"> <br><br>
<label>Your Age</label>
<input type="number" name="age" placeholder="Enter Your Age"><br><br>
<label>Your DOB</label>
<input type="date" name="dob" placeholder="Choose Your DOB"><br><br>
<p><input type="submit" name="submit" value="Submit"> <input
type="reset" name="reset" value="Reset"> </p>
</form>
</body>
</html>
HTML
में
iframe
का
use
किसी
web page
मेंदुसरे
web page
कोदिखानेकेलिएकियाजाताहै।
means nested webpage
को
show
करनेकेलिएकियाजाताहै।
webpage
में
iframe use
करनेकेलिए
<iframe> tag
का
use
कियाजाताहै।
HTML iframe Attributes
iframe
में
use hone
वालेकुछ
tags
इस प्रकारहैं
-
HTML iframe src=""
<src> attribute <iframe>
कासबसे
important attribute
है
,
इसमेंहमउस
page
का
path
देतेहैं
जिस
page
कोहमें
<iframe>
में
show
करानाहै।
For Example -
<iframe src="https://learnhindituts.com/html/html-introduction-
in-hindi"></iframe>
Output :
Example
में
HTML Introduction
के
page
का
path
दियागयाहै
,
तो
output
मेंहमेंवही
page का
complete content
दिखाईदेरहाहै।
HTML iframe style=""
<input type="file" name="profile_image"> <br><br>
<label>Your Age</label>
<input type="number" name="age" placeholder="Enter Your Age"><br><br>
<label>Your DOB</label>
<input type="date" name="dob" placeholder="Choose Your DOB"><br><br>
<p><input type="submit" name="submit" value="Submit"> <input
type="reset" name="reset" value="Reset"> </p>
</form>
</body>
</html>
HTML
में
iframe
का
use
किसी
web page
मेंदुसरे
web page
कोदिखानेकेलिएकियाजाताहै।
means nested webpage
को
show
करनेकेलिएकियाजाताहै।
webpage
में
iframe use
करनेकेलिए
<iframe> tag
का
use
कियाजाताहै।
HTML iframe Attributes
iframe
में
use hone
वालेकुछ
tags
इस प्रकारहैं
-
HTML iframe src=""
<src> attribute <iframe>
कासबसे
important attribute
है
,
इसमेंहमउस
page
का
path
देतेहैं
जिस
page
कोहमें
<iframe>
में
show
करानाहै।
For Example -
<iframe src="https://learnhindituts.com/html/html-introduction-
in-hindi"></iframe>
Output :
Example
में
HTML Introduction
के
page
का
path
दियागयाहै
,
तो
output
मेंहमेंवही
page का
complete content
दिखाईदेरहाहै।
HTML iframe style=""
style attribute
का
use CSS style apply
करनेकेलिएकियाजाताहै।बैसेतो
style attribute HTML
elements
केलिए
universal attribute
है
because
आप इसेकिसीभी
element
में
use
कर सकतेहैं।
For Example -
<iframe src="https://learnhindituts.com/html/html-introduction-
in-hindi" style="border:none;width:250px;height:200px"></iframe>
Output :
बैसेतोइसके
<img> tag
कीतरह
width & height attribute
भीहोतेहैं
,
जिनकी
help से
आप <iframe>
की
width
और
height set
कर सकतेहैं।
जबहम
web page ready
करतेहैंतो
need
के
according
हमें
Audio files
कीभीजरूरतपढ़तीहै
, HTML
में
audio / music
को
use
करनेकेलिए
<audio> tag
का
use
कियाजाताहै।
अभी
HTML
तीनतरह
audio files
को
support
करताहै।
mp3
wav
ogg
HTML Audio Example
Audio files
का
path
देनेकेलिए इसमेंहमें
<source> tag
का
use
करनेपड़ताहै।
<audio controls>
<source src="https://learnhindituts.com/storage/sparrows-
chirping.mp3" type="audio/mp3">
browser does not support audio tag.
</audio>
Output :
तोकुछइसतरहसे
web pages
पर
audio / music files
को
use
करतेहैं।
हा
लाँकि
<audio> tag
केकई
useful attributes
भीहोतेहैं
music file
कोऔर अच्छे
control
कियाजासके।
HTML audio Atributes
का
use CSS style apply
करनेकेलिएकियाजाताहै।बैसेतो
style attribute HTML
elements
केलिए
universal attribute
है
because
आप इसेकिसीभी
element
में
use
कर सकतेहैं।
For Example -
<iframe src="https://learnhindituts.com/html/html-introduction-
in-hindi" style="border:none;width:250px;height:200px"></iframe>
Output :
बैसेतोइसके
<img> tag
कीतरह
width & height attribute
भीहोतेहैं
,
जिनकी
help से
आप <iframe>
की
width
और
height set
कर सकतेहैं।
जबहम
web page ready
करतेहैंतो
need
के
according
हमें
Audio files
कीभीजरूरतपढ़तीहै
, HTML
में
audio / music
को
use
करनेकेलिए
<audio> tag
का
use
कियाजाताहै।
अभी
HTML
तीनतरह
audio files
को
support
करताहै।
mp3
wav
ogg
HTML Audio Example
Audio files
का
path
देनेकेलिए इसमेंहमें
<source> tag
का
use
करनेपड़ताहै।
<audio controls>
<source src="https://learnhindituts.com/storage/sparrows-
chirping.mp3" type="audio/mp3">
browser does not support audio tag.
</audio>
Output :
तोकुछइसतरहसे
web pages
पर
audio / music files
को
use
करतेहैं।
हा
लाँकि
<audio> tag
केकई
useful attributes
भीहोतेहैं
music file
कोऔर अच्छे
control
कियाजासके।
HTML audio Atributes
Attribute
Name Uses
controlscontrols attribute
का
use play / pause action button
केलिएकियाजाताहै
,
जैसाकिआप ऊपरदिएगए
सकतेहैं।
autoplay
इस
attribute
का
use
करकेहम
music file को automatically play
करनेकेलिएकरतेहैं
,
हमें
play button press
पड़तीहै।जैसेही
audio file ready
होतीहैयह
automatically play
होजातीहै।
loop
यहबताताहैकि
audio file complete
होतेहीफिरसे
start
होजायगी।
muted
यह
audio output को mute
करनेकेलिए
use
होताहै।
HTML audio attribute Example
<audio controls autoplay loop>
<source src="https://learnhindituts.com/storage/sparrows-
chirping.mp3" type="audio/mp3">
browser does not support audio tag.
</audio>
Output :
अबचूँकि
example में autoplay & loop attribute
का
use
कियागयाहै
,
इसलिएजैसेही
web page
load
होगाये
audio automatically play
होजायगीऔर
complete
होतेही
restart हो
गी।
I Hope ,
अब आप
HTML
में
audio
कोकैसे
use
करतेहैंयेसमझहीगएहोंगे।
HTML
में
video
को
use
करनेकेलिए
<video> tag
का
use
कियाजाताहै।
HTML
निम्नतरहकी
video
files
को
support
करताहै।
mp4
webM
ogg
इनमेसे
MP4 format YouTube
द्वारा
recommended है
।
HTML
में
video
को
use
करनेकेलिए
<video> tag
का
use
कियाजाताहै।
HTML
निम्नतरहकी
video
files
को
support
करताहै।
Name Uses
controlscontrols attribute
का
use play / pause action button
केलिएकियाजाताहै
,
जैसाकिआप ऊपरदिएगए
सकतेहैं।
autoplay
इस
attribute
का
use
करकेहम
music file को automatically play
करनेकेलिएकरतेहैं
,
हमें
play button press
पड़तीहै।जैसेही
audio file ready
होतीहैयह
automatically play
होजातीहै।
loop
यहबताताहैकि
audio file complete
होतेहीफिरसे
start
होजायगी।
muted
यह
audio output को mute
करनेकेलिए
use
होताहै।
HTML audio attribute Example
<audio controls autoplay loop>
<source src="https://learnhindituts.com/storage/sparrows-
chirping.mp3" type="audio/mp3">
browser does not support audio tag.
</audio>
Output :
अबचूँकि
example में autoplay & loop attribute
का
use
कियागयाहै
,
इसलिएजैसेही
web page
load
होगाये
audio automatically play
होजायगीऔर
complete
होतेही
restart हो
गी।
I Hope ,
अब आप
HTML
में
audio
कोकैसे
use
करतेहैंयेसमझहीगएहोंगे।
HTML
में
video
को
use
करनेकेलिए
<video> tag
का
use
कियाजाताहै।
HTML
निम्नतरहकी
video
files
को
support
करताहै।
mp4
webM
ogg
इनमेसे
MP4 format YouTube
द्वारा
recommended है
।
HTML
में
video
को
use
करनेकेलिए
<video> tag
का
use
कियाजाताहै।
HTML
निम्नतरहकी
video
files
को
support
करताहै।
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>HTML Video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="filename.mp4" type="video/mp4">
</video>
</body>
</html>
तोकुछइसतरहसे
web pages
पर
video files
को
use
करतेहैं।हालाँकि
<video> tag
केकई
useful
attributes
भीहोतेहैं
video file
कोऔर अच्छे
control
कियाजासके।
HTML video Attributes
Attribute
Name
Uses
controlscontrols attribute
का
use play / pause action button
केलिएकियाजाताहै
,
जैसाकिआप ऊपरदिएगए
सकतेहैं।
autoplay
इस
attribute
का
use
करकेहम
video file को automatically play
करनेकेलिएकरतेहैं
,
हमें
play button press
है।जैसेही
video file ready
होतीहैयह
automatically play
होजातीहै।
source
इस
attribute
मेंआप
video files
का
path
देतेहैंजिन्हेहमें
web pages
में
show
करानाहै
,
आप एकसाथ एकसेज्यादा
path
भीदेसकतेहोलेकिन
browser
सबसेपहले
recognized format
का
use क
रेगा।
muted
यह
video output को mute
करनेकेलिए
use
होताहै।
<html>
<head>
<meta charset="utf-8">
<title>HTML Video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="filename.mp4" type="video/mp4">
</video>
</body>
</html>
तोकुछइसतरहसे
web pages
पर
video files
को
use
करतेहैं।हालाँकि
<video> tag
केकई
useful
attributes
भीहोतेहैं
video file
कोऔर अच्छे
control
कियाजासके।
HTML video Attributes
Attribute
Name
Uses
controlscontrols attribute
का
use play / pause action button
केलिएकियाजाताहै
,
जैसाकिआप ऊपरदिएगए
सकतेहैं।
autoplay
इस
attribute
का
use
करकेहम
video file को automatically play
करनेकेलिएकरतेहैं
,
हमें
play button press
है।जैसेही
video file ready
होतीहैयह
automatically play
होजातीहै।
source
इस
attribute
मेंआप
video files
का
path
देतेहैंजिन्हेहमें
web pages
में
show
करानाहै
,
आप एकसाथ एकसेज्यादा
path
भीदेसकतेहोलेकिन
browser
सबसेपहले
recognized format
का
use क
रेगा।
muted
यह
video output को mute
करनेकेलिए
use
होताहै।
Hey ! I'm Saroj kumar . Working in IT industry more than 2 years. I love to talk about
programming as well as writing technical tutorials and blogs that can help to others ....
keep learning :) 9955979088 [email protected]
Get connected with me -
programming as well as writing technical tutorials and blogs that can help to others ....
keep learning :) 9955979088 [email protected]
Get connected with me -
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 332
- Slides 51
- Favorites 1
- Age 397 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
28 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views