HTML Basics – 17

HTML5

Table of Contents

HTML Basics

  • HTML का पूरा नाम :- Hyper Text Markup Language (हाइपर टेक्स्ट मार्कअप लैंग्वेज) होता हैं।
  • बेव पेज के निर्माण के लिए HTML सबसे अधिक लोकप्रिय हैं।
  • HTML एक मार्कअप भाषा है और मार्कअप एक प्रोग्रामिंग भाषा हैं।
  • मार्कअप भाषा से आप टेक्स्ट को अधिक इंटरैक्टिव और डायनामिक बना सकते हैं।
  • HTML का आविष्कार टिम बर्नर ली ने किया था।
  • स्टैण्डर्ड HTML का आविष्कार 1995 में हुआ था जिसका नाम HTML 2.0 रखा गया।
  • Browser (ब्राउज़र) वेब पेज को पढ़कर हमारे देखने योग्य बनाता है।
  • Browser (ब्राउज़र) HTML Tag (टैग) और स्क्रिप्ट को प्रदर्शित नहीं करते हैं, लेकिन पेज के कन्टेन्ट कि व्याख्या करते हैं।

HTML versions

VersionYear
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML52014
HTML Version

HTML Tags

HTML Tags कीवर्ड (Tag Name) हैं, जो एंगुलर ब्रैकेट्स के अन्दर होते हैं। जैसे :-

<tag_name>Content<tag_name>

  • HTML tags अधिकतर जोड़ें में होते हैं जैसे :- <HTML> और </HTML>
  • पहले tag को स्टार्ट (start) टैग और दूसरे tag को एंड (end) टैग कहते हैं।
  • कुछ लोग स्टार्ट टैग को Opening tag और एंड टैग को closing tag कहते हैं।
  • एंड टैग को स्टार्ट टैग की तरह ही लिखा जाता है, लेकिन टैग नाम से पहले ब्रेकेट के अन्दर फॉरवर्ड स्लैश (/) का चिन्ह लगाते हैं।

Basic Structure of HTML

सभी HTML डाक्यूमेंट्स एक ही बेसिक स्ट्रक्चर को फॉलो करते हैं ताकि ब्राउज़र यह जान सके कि उसे HTML निर्देशों के साथ क्या करना हैं।

बेसिक स्ट्रक्चर, जिस पर सभी वेब पेज बनाये जाते हैं निम्न है :-

An HTML Document Has Two Main Parts :-

  1. Head :-हेड एलिमेंट (Element) में वेब डॉक्यूमेंट का टाइटल (Title) और मेटा डेटा (Meta Data) होता है।
  2. Body:- बॉडी एलिमेंट में वह जानकारी होती हैं जो वेब पेज में आप दिखाना चाहते हैं।
HTML, HTML Basic
HTML Basics

HTML पेज के कुछ अन्य एलिमेंट :-

  • <!DOCTYPE HTML> एक doctype डिक्लेरेशन है जो ब्राउज़र को बताता है कि HTML Code किस वर्शन में लिखा गया है। doctype कोड HTML5 से मेल खाता है जोकि अपडेट वर्शन हैं।
  • <html> टैग ब्राउज़र को बताता है कि यह एक HTML डॉक्यूमेंट हैं। <html> टैग एक HTML डॉक्यूमेंट के रूट को रिप्रेजेन्ट करता है। <html> टैग अन्य सभी HTML एलिमेंटों के लिए कंटेनर की तरह काम करता हैं। [<!DOCTYPE> टैग को छोड़कर]</html>
  • <head> टैग एक अन्य टैग हैं, जिसका उपयोग HTML डॉक्यूमेंट में सबसे पहले किया जाता है, ताकि ब्राउज़र विंडो में दिखने के लिए शीर्षक (Title) डाला जा सके। हम इनफार्मेशन को ओपनिंग टैग और क्लोजिंग टैग के बीच में लिखते हैं। यह इनफार्मेशन पेज के बारे में होती हैं।</head>
  • <tiltle> tag में टाइटल (शीर्षक) लिखा जाता हैं जो वेब पेज के टाइटल बार में दिखता हैं।</tiltle>
  • <body> टैग में लिखा टेक्स्ट किसी पेज के कंटेंट को ब्राउज़र में कैसा दिखे इसका वर्णन करता हैं। <body> टैग के अन्दर पूरे वेब पेज की जानकारी होती हैं।</body>
  • <h1> और </h1> के बीच का टेक्स्ट एक शीर्षक का वर्णन करता हैं।
  • <p> और </p> के बीच का टेक्स्ट पैराग्राफ का वर्णन करता हैं।

Notepad पर HTML का उपयोग करके एक प्रोग्राम लिखना

Notepad पर आपको HTML के द्वारा अपना पहला वेब पेज बनाने के लिए आपको निम्न काम करना होगा:-

  • Click on Start Button ►Select All Programs►Accessories►Select Notepad and Click it.
  • HTML Coding को लिखे :-
HTML Basics
HTML Basics
  • Select File MenuSave As को सेलेक्ट करें।
  • फाइल का नाम “First.html” या .html या .htm के साथ समाप्त होने वाला कोई भी नाम दे सकते हैं। अब Save करें।
  • अपने पसंद के Browser में अपनी सेव की गई HTML फाइल को खोलें। आपका रिजल्ट (परिणाम) ब्राउज़र विंडो में कुछ इस प्रकार दिखाई देगा :-
First Page HTML
First Page HTML

HTML tag का वर्गीकरण :-

  1. Container Tag
  2. Empty Tag
  1. Container Tag:- इसमें पास Start tag और end tag दोनों जोड़े में होते हैं। Container (कंटेनर) टैग में, Opening tag, Content tag और Closing tag शामिल होते हैं।
    • <html> Opening tag
    • </html> Closing tag
  2. Empty Tag:- ये ऐसे टैग होते हैं जिनमें कोई डेटा नहीं होता हैं, इसलिए इन्हें Empty टैग कहते हैं। जैसे :- <br> एक Empty tag हैं, जिसका कोई Closing tag नहीं होता हैं। <br> टैग लाइन ब्रेक करता है (मतलब इसके बाद लिखना अगली लाइन से शुरू होगा)।

HTML Attributes

सभी HTML एलेमेंटों में Attributes हो सकता हैं। Attributes एलेमेंटों के बारे में अतिरिक्त जानकारी डेटा हैं। Attributes हमेशा Start tag में स्पेशिफाई किया जाता हैं। Attributes अधिकतर नाम/वैल्यू के जोड़े में आते हैं जैसे name = “value” ।

Body Tag

<body> tag को <body> एलिमेंट भी कहते हैं। इस टैग के अन्दर जो भी कंटेंट हम लिखते हैं, वेब ब्राउज़र के पेज पर दिखाई देता हैं। जैसे :-

<body> अब आपको पेज में जो भी लिखना हैं वह लिख दो</body>

<body> टैग के साथ उपयोग किए जाने वाले कुछ Attributes :-

AttributesDescription
BgcolorWeb Document का Background Color बदलने के लिए।
BackgroundWeb Document की बॉडी पर Background Image लगाने के लिए।
TextText का रंग बदलने के लिए।
Left MarginWeb Document के Left Margin को सेट करने के लिए।
Top MarginWeb Document के Top Margin को सेट करने के लिए।
Linkबिना विजिट किए गए Hyperlinks के Text का रंग चुनने के लिए।
VLinkविजिट किए गए Hyperlinks के Text का रंग चुनने के लिए।
ALinkचयनित Hyperlinks के Text का रंग चुनने के लिए।
Body Attributes

HTML Code

HTML 5
Body Attributes

Web Page Preview

HTML 4
Body Attributes

Top 100 HTML color codes

Below is a list of the overall top 100 HTML color codes based on visits.

RankCodeColor
1#FF0000Red
2#00008BDarkBlue
3#FFFFFFWhite
4#686A6CNardo Gray
5#000000Black
6#808080Gray or Grey
7#ADD8E6LightBlue
8#FFFF00Yellow
9#0000FFBlue
10#966F33Wood
11#FFCCCBLight Red
12#008000Green
13#FFA500Orange
14#454545Light Black
15#00FFFFAqua or Cyan
16#C0C0C0Silver
17#E1D9D1Dark White
18#D3D3D3LightGray or LightGrey
19#FFC0CBPink
20#800080Purple
21#00FF00Lime
22#FFD700Gold
23#FFCE44Chrome Gold
24#FF00FFFuchsia or Magenta
25#9D00FFNeon Purple
26#FFFFE0LightYellow
27#FFFF33Neon Yellow
28#93917CMillennium Jade
29#006400DarkGreen
30#98AFC7Blue Gray
31#800000Maroon
32#7FFFD4Aquamarine
33#728FCELight Purple Blue
34#A52A2ABrown
35#FFFFF7Light White
36#357EC7Windows Blue
37#8B8000Dark Yellow
38#D4AF37Metallic Gold
39#040720Black Blue
40#BCC6CCMetallic Silver
41#2B65ECOcean Blue
42#90EE90LightGreen
43#FFFEFAHalf White
44#F8F0E3Off White
45#E5E4E2Platinum
46#808000Olive
47#A9A9A9DarkGray or DarkGrey
48#87CEEBSkyBlue
49#3A3B3CDark Gray
50#0C090ANight
51#2F539BEstoril Blue
52#666362Ash Gray
53#00BFFFDeepSkyBlue
54#F6BE00Deep Yellow
55#FAAFBABaby Pink
56#1589FFNeon Blue
57#151B54Night Blue
58#DADBDDSilver White
59#EB5406Red Gold
60#F5F5DCBeige
61#FEFCFFMilk White
62#1E90FFDodgerBlue
63#FFFFF4White Gold
64#FDD017Bright Gold
65#C2DFFFSea Blue
66#000080Navy
67#4863A0Azure Blue
68#625D5DCarbon Gray
69#FDBD01Neon Gold
70#F70D1AFerrari Red
71#FED8B1Light Orange
72#16F529Neon Green
73#848B79Sage Green
74#F8F6F0Pearl White
75#FFFDD0Cream White
76#AA6C39Dark Gold
77#36013FDeep Purple
78#F67280Pastel Red
79#E8ADAARose
80#82CAFFDay Sky Blue
81#8B0000DarkRed
82#9F8C76Dark Beige
83#008080Teal
84#1569C7Blue Eyes
85#8E7618Hazel
86#95B9C7Baby Blue
87#D16587Purple Pink
88#3B3131Oil
89#7E3517Blood Red
90#29465BDark Blue Grey
91#2C3539Gunmetal
92#368BC1Glacial Blue Ice
93#E56717Papaya Orange
94#F0F8FFAliceBlue
95#34282CCharcoal
96#254117Dark Forest Green
97#C9DFECGulf Blue
98#5CB3FFCrystal Blue
99#81D8D0Tiffany Blue
100#191970MidnightBlue

Heading Tags

HTML में Heading वे Titles और Subtitles होते हैं जिन्हें आप अपने वेब पेज में दिखाना चाहते हैं।HTML में Heading को <h1> से <h6> टैग के साथ लिखा जाता है। जैसे:-

<h1> Heading 1</h1> सबसे महत्त्वपूर्ण शीर्षक (Title) को डिफाइन करता हैं

<h2> Heading 2</h2>

<h3> Heading 3</h3>

<h4> Heading 4</h4>

<h5> Heading 5</h5>

<h6> Heading 6</h6> सबसे कम महत्त्वपूर्ण शीर्षक (Title) को डिफाइन करता हैं

प्रत्येक HTML शीर्षक का एक निश्चित आकार होता हैं। इसे आप CSS font-size से बदल सकते हैं।

<h1 style=”font-size:60px;”>Heading 1</h1>

<p> tag (पैराग्राफ टैग)

HTML में <p> टैग का प्रयोग आप अपना वेब पेज लिखने के लिए करते हैं। <p> Paragraph </p> । पैराग्राफ हमेशा नई लाइन से शुरू होता है। ब्राउज़र पैराग्राफ में कुछ मार्जिन छोड़ता है जिसे आप CSS की मदद से बदल सकते हैं।

HTML Code

HTML 6
Paragraph Align

Web Page Preview

HTML Style

HTML Style Attribute का उपयोग किसी एलिमेंट में स्टाइल को जोड़ने के लिए किया जाता हैं। जैसे :- रंग, फॉण्ट, आकार आदि।

<tagname style=”property:value;”>

Style Attributes में काम के हिसाब से निम्न CSS प्रॉपर्टी होती हैं:-

CSS PropertyDescription
background-colorIt defines the Background Color for an HTML Element.
colorIt defines the Text Color for an HTML Element.
font-familyIt defines the Font to be used for an HTML Element.
font-sizeIt defines the Text Size for an HTML Element.
text-alignIt defines the Horizontal Text Alignment for an HTML Element.
HTML Style Attribute

HTML Code

Web Page Preview

Formatting Tags

HTML Formatting Tags के प्रयोग से वेब पेज को सुन्दर बनाता हैं। कुछ Formatting Tag निम्नलिखित हैं:-

  • <b>- Bold Text
  • <strong>- Important Text
  • <i>- Italic Text
  • <em>- Emphasized Text
  • <mark>- Marked Text
  • <small>- Smaller Text
  • <big>- Big Text
  • <del>- Deleted Text
  • <ins>- Inserted Text
  • <sub>- Subscript Text
  • <sup>- Superscript Text
  • <u>- Underline Text
  • <strike>Strikethrough Text

HTML Code

HTML 12
Formatting Tags

Web Page Preview

HTML 13
Formatting Tags

Font Face, Size & Colour

<Font> Tag का उपयोग वेब पेज पर टेक्स्ट के फ़ॉर्मेट को बदलने के लिए किया जाता हैं। Font tag के कुछ Attributes निम्न हैं :-

AttributesValueDescription
ColorRGB(x,x,x)
#xxxxxx
Color_Name
Text का कलर डिफाइन करने के लिए; इसके लिए आपको 6 अंकों का colar code या कलर का नाम लिखना होगा।
FaceFont_Family
Times New Roman,
Verdana
वेब पेज में आपने अनुसार font_family का उपयोग करने के लिए।
SizeNumberयह आपके वेब पेज के टेक्स्ट की size को डिफाइन करता है। जैसे :- +1, +2,….. या -1,-2,….
Font Face, Size & Colour

HTML Code

HTML 15
Font Face, Size & Colour

Web Page Preview

HTML 16

Div Tag

<div> टैग HTML डॉक्यूमेंट में एक विभाजन (भाग) को बताता हैं। <div> एलिमेंट का उपयोग HTML के अन्य एलिमेंट के लिए CSS के रूप में या JavaScript के साथ कुछ कार्यों को करने के लिए कंटेनर के रूप में किया जाता है ।

Web Page के Layout को सेट करने के लिए CSS के साथ अधिकतर <div> एलिमेंट का प्रयोग किया जाता है।

HTML Code

HTML 20
div Tag

Web Page Preview

HTML 18
div tag

Pre Tag

एक <pre> element में टेक्स्ट को एक निश्चित चौड़ाई वाले फॉण्ट में दिखाया जाता हैं । <pre> एलिमेंट स्पेस और लाइन दोनों को सुरक्षित करता हैं यानि कि आप Space Button से कितना भी स्पेस दें सकते हैं और Enter Button से नई लाइन में आ सकते हैं।

HTML Code

HTML 19
pre element – html

Web Page Preview

HTML 21
pre element

Horizontal Line Tag <hr>

html में <hr> tag का उपयोग हॉरिजॉन्टल लाइन बनाने के लिए किया जाता है। <hr> को हॉरिजॉन्टल रूल भी कहते हैं। <hr> टैग के निम्न Attributes हैं :-

AttributeValueDescription
AlignLeft
Right
Center
Alignment को स्पेशिफाई करता हैं।
NoshadeNoshadeशेडिंग प्रभाव को हटाता हैं।
Sizepixels या %हॉरिजॉन्टल लाइन की ऊँचाई को स्पेशिफाई करता हैं।
Width pixels या %हॉरिजॉन्टल लाइन की चौड़ाई को स्पेशिफाई करता हैं।
<hr> tag

HTML Code

Horizontal tag
Horizontal Line tag

Web Page Preview

HTML 23
Horizontal Line tag

Quote Tag <q>

<q> टैग एक छोटे Quotation को डिफाइन करता हैं। इसमें ब्राउज़र कोटेशन चिन्ह लगा डेटा हैं।

HTML Code

HTML 24
Quote Tag <q>

Web Page Preview

HTML 25
Quote Tag <q>

Anchor links and Named Anchors

html में <a> टैग एक लिंक को स्पेशिफाई करता हैं। <a> टैग को एंकर टैग कहते हैं। आप Opening Tag <a> और Closing Tag </a> के बीच का कुछ भी लिंक का हिस्सा बन जाता हैं। जब कोई लिंक पर क्लिक करता हैं तो लिंक किए गए डॉक्यूमेंट पर पहुँच जाता हैं। डॉक्यूमेंट का रिफरेन्स देने के लिए href (हाइपरटेक्स्ट रिफरेन्स) Attribute का उपयोग किया जाता हैं।

आपको इस Table से अधिक समझ में आएगा :-

<a href=html लिंक स्टार्ट करना
“www.rkmssir.com”अपना लिंक डालें और > लगायें
RKMS Sirअपनी लिंक को जो नाम देना चाहते हैं वह लिखें
</a>अपने लिंक को बंद करें। यहाँ पर लिंक लगाने वाला काम पूरा हुआ।
anchor links and named anchors

HTML Code

HTML 26
Anchor Tag

Web Page Preview

HTML 27
Anchor Tag

HTML Code

HTML 28
Hyperlinks

Web Page Preview

HTML 29
Hyperlinks

Link Text के स्थान पर आप कोई HTML Image या HTML Element लगा सकते हो।

The Target Attributes

लिंक किए गए डाक्यूमेंट्स को खोलने के स्थान को स्पेशिफाई करने के लिए कुछ Attributes निम्न हैं:-

OptionDescription
_blankलिंक डॉक्यूमेंट को New Window या Tab में खोलने के लिए
_selfलिंक डॉक्यूमेंट को Same Frame में खोलने के लिए
_parentलिंक डॉक्यूमेंट को Parent Frame में खोलने के लिए
_topलिंक डॉक्यूमेंट को Window के पूरे भाग में खोलने के लिए
targetframeलिंक डॉक्यूमेंट को नाम के Target Frame में खोलने के लिए
The Target Attributes

HTML Code

HTML 30
the target attributes

Web Page Preview

HTML 31
the target attributes

<base> Path

जब आप एक ही वेबसाइट से संबंधित HTML Document लिंक इसमें लिंक करते हैं, तो आपको पूरे लिंक को लिखना आवश्यक नही होता हैं। इसके लिए आपको HTML डॉक्यूमेंट के हैडर में <base> Tag का उपयोग करके वेबसाइट का लिंक लगाना होता हैं। जैसे:-

HTML Code

HTML 32

Web Page Preview

HTML 33

आपकी वेबसाइट पर दो प्रकार के लिंक हो सकते हैं:-

  1. External Link:- अपनी वेबसाइट पर कोई (Global) लिंक लगाना।
  2. Internal Link:- अपनी वेबसाइट पर उसी के अन्य पेजों का लिंक लगाना।

<a Name=”top”>Title of The Page</a>

Page में नीचे से एकदम ऊपर जाने के लिए <body> tag के तुरन्त बाद Link में एक नाम दिया जाता है। फिर पेज में सबसे नीचे एक लिंक दिया जाता हैं और उस लिंक में ऊपर जो नाम दिया हैं उसे डालना होता है। चलो इसकों समझते हैं:-

HTML 34
Top Link

Links – Colors & Download Link

Link Colors:- आप अपनी वेबसाइट के लिंक (alink, vlink, Link) के रंग को सेट कर सकते हैं।

जब आप अपनी लिंक पर माउस को ले जाते हैं तो आप दो चीजों को नोटिस करते होंगे:-

  1. आपके माउस का एरो एक छोटे से हाथ के रूप में बदल जाता हैं।
  2. आपके लिंक एलिमेंट का रंग बदल जाता हैं।

डिफ़ॉल्ट रूप से सभी ब्राउज़र में लिंक कुछ इस प्रकार दिखाई देती हैं:-

  • An unvisited links is underline and Blue (नीली होगी).
  • A visited links is underline and Purple (बैंगनी होगी).
  • An active links is underline and Red (लाल होगी).

HTML Code

HTML
Hyperlink

Download Links:– आप अपने HTML पेज में PDF, ZIP या अन्य फाइल को डाउनलोड करने का लिंक लगा सकते हैं। आपका लिंक डाउनलोड करने योग्य फाइल का होना चाहिए।

HTML 2
Download Link

Image Tag <img>

<img> Tag के द्वारा आप वेब पेज में Image लगा सकते हैं। <img> tag Empty tag हैं। <img> tag, image को Attribute के रूप ,में लेता हैं।

AttributeValueDescription
Aligntop
bottom
middle
left
right
HTML5 सपोर्ट नहीं करता हैं।
Image के एलाइनमेंट को स्पेशिफाई करता हैं (आसपास के एलिमेंट के अनुसार)।
AltTextयदि यूजर को किसी वजह से इमेज न दिखाई दे तब एक वैकल्पिक टेक्स्ट आता हैं इसी टेक्स्ट को स्पेशिफाई करने के लिए।
titletitleImage का Title देने के लिए।
borderPixelsImage के बॉर्डर की चौड़ाई को स्पेशिफाई करता हैं।
heightPixelsImage की Height (ऊँचाई) को स्पेशिफाई करता हैं।
widthPixelsImage की Width (चौड़ाई) को स्पेशिफाई करता हैं।
hspacePixelsImage के Left Side और Right Side पर White Space को स्पेशिफाई करने के लिए।
vspacePixelsImage के Top और Bottom के White Space को स्पेशिफाई करने के लिए।
SrcURLImage के url को स्पेशिफाई करने के लिए
Image Tag
  • HTML वेब पेज में Image लगाने के लिए Image और HTML Code फाइल एक ही स्थान पर होनी चाहिए।
  • यदि Image और HTML Code फाइल अलग-अलग स्थान पर हैं तो Image का Path देना होगा।

HTML Code

image tag
Image tag <img>

यदि आप HTML वेब पेज की Image में लिंक लगाना चाहते हैं तो आपको सिर्फ <img> टैग में दोनों तरफ <a href> और </a> tag लगाना होता हैं।

जैसे:-

image link tag
Image link tag

Comments:-

अपने HTML वेब पेज में comments को <!– Write Your Comments–> में लिखा जाता हैं।

Note:- Comment ब्राउज़र द्वारा दिखाया नहीं जाता हैं।

Tables (Attributes – Border, Cellpadding, Cellspacing, Height, Witdh) :-

  • HTML के Web Page में Table टैग Developers को डाटा Rows और Columns में व्यवस्थित करने में सहायता करता हैं।
  • <Table> Tag को <table> और </table> रूप में लिखा जाता हैं। इसके बीच में विभिन्न एलिमेंट होते हैं।
  • <tr> एलिमेंट Table Row को डिफाइन करता हैं।
  • <th> एलिमेंट Table Heading को डिफाइन करता हैं। डिफ़ॉल्ट रूप से यह Center Align और Bold होता हैं।
  • <td> एलिमेंट Table Cell (Table Definition) को डिफाइन करता हैं। डिफ़ॉल्ट रूप से यह Left Align होता हैं।
  • इसके अलावा यदि आपको HTML Table को थोड़ा कठिन बनाना हो तो कुछ एलिमेंट और होते हैं । जैसे :-<caption>, <col>, <colgroup>, <thead>, <tfoot>, <tbody> आदि।

HTML Code

table tag

Web Page Preview

table tag 1
Table Tag

<table> tag के कुछ Attributes :-

AttributesValueDescription
Alignleft
center
right
Table के एलाइनमेंट को स्पेशिफाई करता हैं।
Bgcolorrgb (x,x,x)
#xxxxxx
colorname
Table के बैकग्राउंड कलर को स्पेशिफाई करता हैं।.
Border10Table के बॉर्डर को स्पेशिफाई करता हैं।
CellpaddingPixelsCell Edge और Cell Content के बीच स्पेस को स्पेशिफाई करता हैं।
CellspacingPixelsCell के बीच स्पेस को स्पेशिफाई करता हैं।
Width Pixels, %Table की चौड़ाई को स्पेशिफाई करता हैं।
Table Attributes

Note:- align, border, cellpadding, cellspacing, frame, rules, summary, with आदि को HTML5 Support नहीं करता हैं।

Table Row <tr>

<tr> tag Table में Row को डिफाइन करता हैं। <tr> एलिमेंट में एक या एक से अधिक <th> या <td> एलिमेंट हो सकते हैं।

<tr> के कुछ Attributes:-

AttributesDescription
<tr align=” “>Table Row में प्रत्येक <td> element के contents के लिए हॉरिजॉन्टल एलाइनमेंट को सेट करता हैं।
<tr valign=” “>Table Row में प्रत्येक <td> element के contents के लिए वर्टीकल एलाइनमेंट को सेट करता हैं।
<tr bgcolor=” “>Single Table Row के बैकग्राउंड को कलर करता हैं।
<tr background=” “>Table Row के लिए बैकग्राउंड इमेज के रूप में प्रयोग की जाने वाली फाइल का URL डाला जाता हैं।
<tr bordercolor=” “>Table Row के अन्दर के सभी बॉर्डर के लिए रंग सेट करता हैं।
<tr> Attributes

Oraganizing Table Rows:- एक सामान्य table में एक Parent <table> टैग और कुछ Table Rows एलिमेंट होते हैं, लेकिन Complex Table में तीन एलिमेंट होते हैं। जैसे :-

  • <thead> :-Row को Parent Container के रूप में Use किया जाता हैं, जिसमें Table Heading शामिल होती है।
  • <tfoot> :- इसका उपयोग Parent Container के रूप में किया जाता हैं जिसमें एक या एक से अधिक Row होती हैं, जिसमें प्रत्येक Table Column में Data के बारे Summary data होता हैं।
  • <tbody> :- जिस Table में Data हो , उन Row के लिए Parent Container के रूप में काम करता हैं।

HTML Code

table tag 2
<tr>,<td>,<th>

Web Page Preview

table tag 3
<tr>, <td>,<th>

HTML Code

table tag 4
Table Attributes

Web Page Preview

table tag 5
Table Attributes

Rowspan and Colspan:-

Rowspan और Colspan दोनों Table Cell के Attribute हैं। यदि हमें दो या दो से अधिक Row को मर्ज करना होता हैं तो हम Rowspan का प्रयोग करते हैं। और यदि हमें दो या दो से अधिक Column को मर्ज करना होता हैं तो हम Colspan का प्रयोग करते हैं।

HTML Code

table tag 6
Rowspan and Colspan

Web Page Preview

table tag 7
rowspan and colspan

Verticle Alignment of Cell Contents :-

यह Row के प्रत्येक Cell में डाटा को विशिष्ट स्थान में Vertically रूप में रखता हैं।

AttributesValueDescription
ValignTop
Center
Bottom
कंटेंट को Top अलाइन करने के लिए।
कंटेंट को Center अलाइन करने के लिए।
कंटेंट को Bottom अलाइन करने के लिए
Vertically Alignment

जैसे : <td valign=”value”>

HTML Code

table tag 8
Vertically Alignment

Web Page Preview

table tag 9
Vertically Alignment

Lists:-

HTML के वेब पेज के किसी भी डाटा को List Style में लिखने की सुविधा प्रदान करता है। सभी प्रकार की Lists में एक या एक से अधिक Heading या Text हो सकते हैं। List का Opening tag <li> और Closing tag </li> होता है। किसी भी list items को लिखने से पहले list के प्रकार को स्पेशिफाई करना होता हैं। यहाँ पर list तीन प्रकार की हैं । चलिए विस्तार से जानते हैं:-

<ul> Unordered List :-

यह प्लेन बुलेट का प्रयोग करके items की list बनाता हैं। इसमें कोई क्रम नहीं होता हैं। Opening टैग <ul> और Closing टैग </ul> होता हैं।आपको जो बुलेट पसंद हैं उसे आपको स्पेशिफाई करना होता हैं। इसके लिए आपको Attribute का प्रयोग करना होगा। डिफ़ॉल्ट रूप से यह “disc” (डिस्क) होता हैं।

ul के Attributes :-

  • <ul type=”square”>
  • <ul type=”disc”>
  • <ul type=”circle”>

HTML Code

list un ordered
list un ordered

Web Page Preview

list un ordered 1
list un ordered

<ol> Ordered List :-

इसमें किसी भी items की list क्रम से बनती हैं। Opening टैग <ol> और Closing टैग </ol> होता हैं। इसमें आप अपनी पसंद की संख्या चुनने के लिए Attributes का प्रयोग करेंगे। डिफ़ॉल्ट रूप से यह एक “संख्या” होती हैं।

ol के Attributes :-

  • <ol type=”1″> – Default – Case Numbers
  • <ol type=”i”> – Lower Case Numbers
  • <ol type=”I”> – Upper Case Roman Numbers
  • <ol type=”a”> – Lower Case Letters
  • <ol type=”1″> – Upper Case Letters

Opening tag में Start Attribute को भी आप शामिल कर सकते हैं। जैसे:- <ol start=3>

  • यदि हम <ol start=3 type=”A”> लिखेंगे तो Order List C से शुरू होगी, क्योकि C तीसरा शब्द हैं।
  • यदि हम <ol start=5 type=”I”> लिखेंगे तो Order List V से शुरू होगी, क्योकि V रोमन का 5 वाँ शब्द हैं।

HTML Code

list ordered
Ordered List

Web Page Preview

list ordered 1
Ordered List

<dl> Definition List :-

इस टैग में डाटा एक डिक्शनरी की तरह प्रदर्शित होता हैं। इसके द्वारा आप शब्दकोष, शब्दों की सूची, या इसी प्रकार का अन्य कुछ प्रदर्शित कर सकते हैं।

डेफिनिशन टैग में निम्न टैग कर प्रयोग कर सकते हैं :-

  • List का Opening Tag <dl> हैं और Closing Tag </dl> हैं।
  • <dt> Description लिस्ट में Term को डिफाइन करता हैं।
  • <dd> Description लिस्ट में प्रत्येक टर्म को Describe करता हैं।

नोट :- इस टैग के अन्दर आप Paragraph, Line Break, Images, Links, List आदि लगा सकते हैं।

HTML Code

Definition List
Definition List

Web Page Preview

Definition List 1
Definition List

Marquee Tag (मार्की टैग):-

Marquee tag HTML का एक नॉन स्टैण्डर्ड एलिमेंट हैं। यह स्वाचालित (Automatice) रूप से Image या Text को ऊपर, नीचे, दाएँ या बाएँ सरकाता (Scroll) करता हैं ।

HTML Marquee Attributes :-

AttributeDescription
behaviorआप Marquee Attribute में तीन प्रकार के behavior लगा सकते हैं। जैसे :- Scroll, Slide and Alternate.
directionContent को scroll करने के डायरेक्शन को बताता हैं । जैसे :- Left, Right, Up and Down.
widthMarquee की चौड़ाई को डिफाइन करता हैं । Pixels या % में।
heightMarquee की ऊँचाई को डिफाइन करता हैं । Pixels या % में।
hspaceHorizontal Space को Define करता हैं।
vspaceVertical Space को Define करता हैं।
scrolldelayscroll को delay कर सकते हैं Seconds में
scrollamountscroll की speed को नंबर में डिफाइन करता हैं
loopMarquee का loop नंबर में डिफाइन करता हैं।
bgcolorbackground का color डिफाइन करता हैं
HTML Marquee Attributes

HTML Code

Marquee tag
Marquee tag

Web Page Preview

RKMS Sir

HTML iframe <iframe> Tag

जिस HTML डाक्यूमेंट् में आप काम कर रहें हैं उस डॉक्यूमेंट में अन्य डॉक्यूमेंट जोड़ने के लिए <iframe> का उपयोग किया जाता हैं। जैसे:-

<iframe src=”url” title=”title name or description”></iframe>

यहाँ पर url के स्थान पर अन्य डॉक्यूमेंट का वेब एड्रेस देना होता हैं।

HTML <iframe> Attributes :-

AttributeDescription
Srcइसमें आपकों उस फाइल का नाम देना होता हैं जिसे आप iframe में लोड करना चाहते हैं।
Nameइससे आप अपने iframe को नाम दे सकते हैं, जिससे आप अपनी फाइल को पहचान सकें।
Heightयह iframe की हाइट को स्पेशिफाई करता हैं।
Widthयह iframe की चौड़ाई को स्पेशिफाई करता हैं।
HTML <iframe> Attributes

Set Height and Width

iframe का आकार स्पेशिफाई करने के लिए Height and Width Attributes का उपयोग किया जाता हैं। डिफ़ॉल्ट रूप से Height and Width Pixels में स्पेशिफाई होता हैं।

iframe
iframe

आप Style Attributes और CSS Height and Width प्रॉपर्टीज के द्वारा भी iframe का आकार बदल सकते हैं।

iframe 1
iframe

iframe का Size, Style और Border Color बदलना :-

iframe 2
size, style and border color

iframe – Remove the Border :-

iframe के बॉर्डर को रिमूव करने के लिए Border Option में none टाइप करना होता हैं। जैसे :-

style=”border:none;”

iframe – Target for a Link :-

  • एक iframe को, लिंक के टारगेट फ्रेम के रूप में प्रयोग किया जा सकता हैं।
  • link के target attributes को iframe के name attribute को भेजता है।
iframe target link
iframe target link

Forms

HTML में एक Form विजिटर से इनपुट लेता हैं और उस जानकारी को किसी भी सर्वर पर पोस्ट करता हैं। जैसे:- रजिस्ट्रेशन के समय आप User से नाम, Email, Address, व्यवसाय आदि जानकारी ले सकते हैं।

HTML <form> टैग का उपयोग HTML Form बनाने के लिए किया जाता है।

Form Attributes

फॉर्म में सबसे अधिक उपयोग होने वाले Form Attributes निम्नलिखित हैं:-

AttributesDescription
Actionफॉर्म एक्शन हमें उस पेज के बारे में बताता हैं, जहाँ पर फॉर्म का डाटा प्रोसेस किया जाएगा।
MethodMethod डाटा को अपलोड करने के लिए उपयोग किया जाता हैं। यह दो प्रकार का होता है :- GET Method और POST Method
TargetTarget Window या Frame को स्पेशिफाई करता हैं, जिसमें फॉर्म का रिजल्ट दिखाया जाता हैं। जैसे:- _blank, _self etc.
enctypeसर्वर पर भेजने से पहले Browser डाटा को कैसे Encode करता है, को स्पेशिफाई करता है। यह दो प्रकार का होता है :-
application/x-www-form-urlencoded:- यह स्टैण्डर्ड method हैं जो अधिकांश समय डिफ़ॉल्ट रूप से उपयोग किया जाता हैं।
multipart/form-data:- इसका उपयोग तब किया जाता हैं जब आप binary डाटा को फाइल के रूप में अपलोड करते हैं। जैसे :- image, word file आदि।
form attributes

Example of a Login Form:-

<form>
<fieldset>
<legend>Log In</legend>
<label>Username: <input type="text"></label><br>
<label>Password: <input type="password"></label><br>
<input type="submit" value="Submit">
</fieldset>
</form>

Log In



Form Elements

Form में बहुत से एलिमेंट होते हैं। जैसे :- Text Fields, Textarea Fields, Drop-Down Menus, Radio Buttons, Checkboxes आदि जिनका उपयोग आप HTML में डाटा एकत्र करने में कर सकते हैं।

Input Types

User से डाटा accept करने के लिए web based forms में interactive कण्ट्रोल बनाने के लिए HTML <input> element का उपयोग करता हैं।

HTML में उपयोग होने वाले विभिन्न Input Types:-

  • <input type=”button”>
  • <input type=”checkbox”>
  • <input type=”color”>
  • <input type=”date”>
  • <input type=”datetime-local”>
  • <input type=”email”>
  • <input type=”file”>
  • <input type=”hidden”>
  • <input type=”image”>
  • <input type=”month”>
  • <input type=”number”>
  • <input type=”password”>
  • <input type=”radio”>
  • <input type=”range”>
  • <input type=”reset”>
  • <input type=”search”>
  • <input type=”submit”>
  • <input type=”tel”>
  • <input type=”text”> Default Value
  • <input type=”time”>
  • <input type=”url”>
  • <input type=”week”>

Note:- label को डिफाइन करने के लिए हमेशा <label> टैग का प्रयोग करें :-

  • <input type=”text”>
  • <input type=”checkbox”>
  • <input type=”radio”>
  • <input type=”file”>
  • <input type=”password”>

<input type=”text”>:

यह Textfield Control बनाता हैं जिसे Single Line Textfield भी कहते हैं। जैसे:-

Student's Name:<input type="text" name="Firstname" placeholder="Enter Your Name" maxlength="15" minlength="3" size="18">
Student’s Name:

Attributes

AttributeDescription
TypeInput control के type को बताता है और text input control के लिए इसे text पर set करता हैं।
NameControl को एक नाम देने के लिए उपयोग किया जाता हैं, जिसे Server के द्वारा recognized किया जाता हैं और Value प्राप्त करने के लिए भेजा जाता हैं।
Valueइसका उपयोग control के अन्दर एक value देने के लिए किया जाता हैं।
Size Characters के लिए text input control की width को स्पेशिफाई करता है।
MaxlengthUser को text box में अधिकतम Characters (अक्षरों) की संख्या को स्पेशिफाई करता हैं।
MinlengthUser को text box में न्यूनतम Characters (अक्षरों) की संख्या को स्पेशिफाई करता हैं।
Placeholderइसका उपयोग क्या input लेना हैं उससे संबंधित Hint देने के लिए किया जाता हैं।
Readonlyइससे text box को Read Only बनाने के लिए किया जाता हैं।
RequiredForm Submit करने से पहले input field भरना जरूरी हैं।
attributes

<input type=”email>

email field सही ईमेल address के लिए text को valid करता हैं। इस field में आपको @ और .(डॉट) लगाना होता हैं। जैसे:-

<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email" placeholder ="Enter Your Email">
<input type="submit" value="submit">
</form>

<input type=”date”>

datebox से यूजर को कोई date चुनने की अनुमति देता हैं। जैसे:-

Enter Your Date Of Birth :<input type="date" name="bday" min="1900-01-01">
Enter Your Date Of Birth :

<input type=”radio”>

एक radio Button, कई विकल्पों में से एक Single Value को Select करने के लिए होता हैं।

Select Gender <input type="radio" name="Gender" Value="Male">Male
<input type="radio" name="Gender" Value="Female">Female
Select Gender Male Female

<input type=”checkbox”>

एक Checkbox बहुत सी Values को Select / De-select करने की अनुमति देता हैं।

Select Qualification: 
<input type="checkbox" name="Quali" value"10">10<sup>th</sup>
<input type="checkbox" name="Quali" value"12">12<sup>th</sup>
Select Qualification: 10th 12th

<input type=”file”>

एक Control जो User को एक File Select करने की अनुमति देता हैं। File के Type को डिफाइन करने के लिए accept attribute का प्रयोग होता है।

<label for="img">Select image:</label>
<input type="file" id="img" name="img" accept="image/*">

<input type=”hidden”>

एक control जो प्रदर्शित नहीं होता हैं लेकिन जिसकी value server पर submit की जाती हैं।

<input type=”image”>

एक Graphical Submit Button के लिए। image source के लिए src attribute का और वैकल्पिक text को डिफाइन करने के लिए alt attribute का उपयोग करते हैं। image की ऊँचाई और चौड़ाई के attribute का उपयोग करें।

<input type="image" id="image" width="100" height="30" alt="Login" src="Flower/Dahlia.jpg">

<input type=”submit”>

एक Button जो Form को Submit करता है। यह Form डाटा को form-handler में Submit करने के लिए एक Button को डिफाइन करता हैं।

<input type=”reset”>

एक Button जो Default Values के लिए Form के कंटेंट को Reset करता हैं।

<!doctype html>
<html>
<body>
<form action=/action_page.php" method="get">
<h1>Student Entry Form</h1>
Enter Name:<input type="text" name="Sname" placeholder="Enter Student Name" required><br>
Enter DOB:<input type="date" name="bday" min="1900-01-01"><br>
Enter Age:<input type="number" name="age"><br>
Select Gender:<input type="radio" name="Gender" value="Male">Male
<input type="radio" name="Gender" value="Female">Female<br>
Enter Email:<input type="email"><br>
Select image:<input type="file" id="img" name="img" accept="image/*"><br>
Select Qualification<input type="checkbox" name="Quali" Value="10">10th
<input type="checkbox" name="Quali" Value="11">11th
<input type="checkbox" name="Quali" Value="12">12th
<input type="checkbox" name="Quali" Value="BA/B.Com/B.sc" checked>BA/B.Com/B.sc<br>
Select Your Favorite Color:<input type="color" name="favcolor"><br>
<input type="submit" value="Submit">
<input type="Reset" value="Reset"></form></body></html>

Student Entry Form

Enter Name:
Enter DOB:
Enter Age:
Select Gender:Male Female
Enter Email:
Select image:
Select Qualification10th 11th 12th BA/B.Com/B.sc
Select Your Favorite Color:

<input type=”button”>

किसी भी Form के अंतिम कॉम्पोनेन्ट के रूप में Button बनाये जाते हैं। एक Button User को Data Submit करने, Upload या Download करने आदि की अनुमति देता हैं।

<!doctype html>
<html>
<body>
<h2>Input Button</h2>
<input type="button" onclick="alert('आपका हम स्वागत करते हैं!')" value="Click Me!">
</body>
</html>

Input Button

<input type=”password”>

एक Single – Line Text field के ही समान हैं,लेकिन इसमें केवल इतना अंतर हैं कि इसकी value Hidden (छिपी) रहती हैं।

<form>
User Name:<br>
<input type="text" name="username"><br>
User Password:<br>
<input type="password" name="psw">
</form>
User Name:

User Password:

Textarea

Text के ही समान Multi Line Text Field हैं,लेकिन इसमें Text की कई लाइन होती हैं। इसका उपयोग तब होता हैं जब User को एक लाइन से लम्बा विवरण देना होता हैं।

<textarea rows="3" cols="20" name="description"> Enter Your Description Here...</textarea>

Drop Down Menu

Drop Down Menu User को बहुत सारे विकल्पों में से एक विकल्प Select करने की अनुमति देता हैं।

<b>Your State</b>
<select name="state">
<option>Uttar Pradesh</option>
<option>Andra Pradesh</option>
<option>Madhya Pradesh</option>
<option>Himachal Pradesh</option>
<option>Arunachal Pradesh</option>
<option>Other</option>
</select>
Your State

HTML Layout

HTML Layout web पेजों को Responsive Form में सुव्यवस्थित, सुन्दर बनाता है।

Web Page :- website बनाते समय web page layout सबसे महत्त्वपूर्ण हिस्सा हैं, जिससे हमारी website शानदार लुक के साथ पेशेवर दिखे। Responsive और Dynamic Website Designing के लिए Layout बनाने के लिए आप CSS (Cascading Style Sheets) और JavaScript पर आधारित फ्रेमवर्क का भी उपयोग कर सकते हैं।

प्रत्येक Website में विशिष्ट तरीके से कंटेंट प्रदर्शित करने के लिए एक विशिष्ट Layout होता हैं।

HTML Layout – Using Tables

HTML के <table> tag का उपयोग करके HTML में Layout बनाने का सबसे सरल तरीका प्रदान करता हैं। इसमें text, imageआदि कंटेंट को rows और columns में डाला जाता हैं।

निम्न layout को 3 row और 2 column के साथ एक HTML Table का उपयोग करके बनाया गया हैं।

table की पहली row और आखिरी row ,में colspan attribute का उपयोग किया गया हैं।

<!doctype html>
<html>
<head>
<title>The Rising Computer Institute</title>
</head>
<body>
<center>
<table width="80%" border="1">
<tr>
<td colspan="2" bgcolor="skyblue">
<center><h1>The Riging Computer Institute</h1></center>
</td>
</tr>
<tr valign="top">
<td bgcolor="#aaa" width="50">
<b>Home</b><br>
Department<br>
Admission<br>
Faculty</br>
</td>
<td bgcolor="#eee" width="100" height="200">
<center><img src="Photo_Name.png" height="200" width="200"></center>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="skyblue">
<center>Copyright©rkmssir.com</center>
</td>
</tr>
</table>
</center>
</body>
</html>
The Rising Computer Institute
The Riging Computer Institute
Home
Department
Admission
Faculty
IMG 20231228 WA0014
Copyright©rkmssir.com

HTML Layout – Using DIV, SPAN

अब हम CSS के साथ <div> tag का उपयोग करके <table > tag वाला परिणाम प्राप्त करने की कोशिश करेंगे।

<!doctype html>
<html>
<title>The Rising Computer Institute</title>
</head>
<body>
<div style="width:80%">
<div style="background-color:skyblue; width:100%">
<center><h1>The Rising Computer Institute</h1></center>
</div>
<div style="background-color:#aaa;height:200px;width:100px;float:left;">
<div><b>Home</b></div>
Department<br>
Admission<br>
Faculty
</div>
<div align="center" style="background-color:#eee;height:200px;width:350px;float:left;">
<img src="photo_name.png" height="200" width="200">
</div>
<div style="background-color:#aaa;height:200px;width:100px;float:right;">
<div><b>Course</b></div>
Fees<br>
News<br>
Images
</div>
<div style="background-color:skyblue;clear:both;">
<center>
Copyright©rkmssir.com
</center>
</div>
</div>
</body>
</html>
The Rising Computer Institute
The Riging Computer Institute
Home
Department
Admission
Faculty
IMG 20231228 WA0014
Course
Fees
News
Images
Copyright©rkmssir.com

Introduction Of HTML5

HTML5, HTML का नया संस्करण हैं। यह ट्रेडिशनल HTML और XHTML style के syntax और नए एलिमेंट, attribute और behaviors को सपोर्ट करती हैं। HTML5 टेक्नोलॉजीज का एक बड़ा सेट हैं जो अधिक विविध और शक्तिशाली वेब साइटों और Applications के निर्माण की अनुमति डेटा हैं। HTML5 ने डॉक्यूमेंट के लिए उपलब्ध Markup में सुधार किया हैं और Application Programming Interface (API) और Document Object Model (DOM) पेश किया हैं।

Features of HTML5

  • HTML5 के लिए, DOCTYPE डिक्लेरेशन बहुत ही सरल हैं <!DOCTYPE HTML>
  • Character Encoding <meta charset=”UTF-8″>
  • New Function Audio इम्बेड करने के लिए <audio>, Video के लिए <video>, Graphics के लिए <svg> और <canvas> हैं।
  • HTML5 Interactive web डॉक्यूमेंट बनाता हैं।
  • नया Structural एलिमेंट हैं।जैसे :- <article>, <header>,<footer>, <nav>, <section>, <figure>
  • HTML5 ग्राहक की भौगोलिक स्थिति का पता लगाने में मदद करता हैं।
  • HTML5 वेब ब्राउज़र पर डाटा को स्टोर करने के लिए web Application methods प्रदान करता हैं।
  • HTML5 डाटा को स्टोर कराने के लिए SQL डेटाबेस का उपयोग करता हैं।
  • HTML5 त्रिकोण, आयत, वृत्त आदि आकृतियों को Draw करने में मदद करता हैं।

Advantage of HTML5

  • HTML5 Cross Flatform हैं। यानी HTML5 का उपयोग किसी भी डिवाइस पर कर सकते हैं।
  • HTML5 ऑडियो और विडियो को सपोर्ट करता हैं।
  • HTML5 आपको Dynamic Graphics जनरेट कर, ऑनलाइन गेम को शामिल करने और विडियो का उपयोग करने की अनुमति देता हैं।
  • HTML5 के साथ coding clear और कंसिस्टेंट हैं।
  • आपके पेज के लिए अधिक पेज layout एलिमेंट उपलब्ध हैं।

Disadvantage of HTML5

  • HTML5 में लंबे code को लिखना होता हैं, जिससे टाइम ज्यादा लगता हैं।
  • HTML5 को एक्सेस करने के लिए नए ब्राउज़र की आवश्यकता होती हैं।
  • HTML5 विभिन्न प्रकार की विडियो को सपोर्ट करता हैं।
  • HTML5 में मल्टीपल डिवाइस के बीच रिस्पोंसिविलिटी एक बड़ी समस्या हो सकती हैं।

HTML5 Tag

HTML5 में शामिल नए टैग की एक सूची हैं जो एक बेहतर डॉक्यूमेंट स्ट्रक्चर प्रदान करते हैं।

List of HTML5 Tag

<article>

<article> का उपयोग एक स्वतंत्र, सेल्फ कंटेंट को डिफाइन करने के लिए किया जाता हैं। एक article का अपना अलग अर्थ होना चाहिए और और बाकी वेब पेज का अलग। <article> एलिमेंट में Blog entry, Forum पोस्ट, News और coments आदि हो सकते हैं। एक HTML डाक्यूमेंट्स में कई <article> टैग भी हो सकते हैं।

<aside>

इसका उपयोग एक section को aside एलिमेंट के आसपास के कंटेंट से संबंधित अतिरिक्त जानकारी के साथ डिफाइन करने के लिए किया जाता हैं।यदि आप aside एलिमेंट के डाटा को हटाते हैं तो main कंटेंट पर कोई प्रभाव नहीं पड़ता हैं।<aside> एलिमेंट में Endnotes comments, reference information, listsof terms, a collection of links, pull-quotes etc तरह की जानकारी होती हैं।

<!doctype html>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<p>I like Reading Math Book</p>
<aside>
<h4>Math Book</h4>
<p>Mathematics is a vey interesting Subject.<br>
Mathematics, a captivating discipline, unveils the beauty of <br>patterns and structures in our world. It is a universal <br>language that empowers us to decipher the mysteries of <br>nature and solve complex problems. Through its precision <br>and logic, mathematics serves as a fundamental tool for <br>innovation, guiding us in understanding everything from the <br>intricacies of the cosmos to the dynamics of everyday life. <br>Embracing mathematical concepts enriches our cognitive <br>skills and fosters a profound appreciation for the elegance <br>inherent in numerical relationships.
</aside>
<body>
</html>
Title of the Document

I like Reading Math Book

<audio>

<audio> tag का उपयोग HTML डॉक्यूमेंट में ऑडियो फाइल को जोड़ने (रन करने) के लिए किया जाता हैं। सपोर्ट करने वाली फाइल MP3, wav, ogg हैं।

<audio controls>
<source src="audio_file_name.mp3" type="audio/mpeg">
Your browser does not support the html audio tag.
</audio>

<bdi>

bdi (bi-directional) यह text के उस हिस्से को अलग करता हैं जो बाहरी text डॉक्यूमेंट से दूसरी दिशा में फ़ॉर्मेट किया जाता हैं।

<h3>Here are five commonly used and useful keyboard shortcuts for computers</h3>
<ul>
<li><bdi>Ctrl + C:</bdi class="name">Copies the selected text or item.</li>
<li><bdi>Ctrl + X:</bdi>Cuts the selected text or item.</li>
<li><bdi>Ctrl + V:</bdi>Pastes the copied text or item.</li>
<li><bdi>Ctrl + S:</bdi>Saves the current document or file.</li>
<li><bdi>Ctrl + F:</bdi>Opens the "Find" dialog box, allowing you to search for specific text or content within a document or webpage.</li>
</ul>
Here are five commonly used and useful keyboard shortcuts for computers
  • Ctrl + C:Copies the selected text or item.
  • Ctrl + X:Cuts the selected text or item.
  • Ctrl + V:Pastes the copied text or item.
  • Ctrl + S:Saves the current document or file.
  • Ctrl + F:Opens the “Find” dialog box, allowing you to search for specific text or content within a document or webpage.

<canvas>

It is used to draw canvas.

<!doctype>
<html>
<head>
<style>#mycanvas{border:1px solid red;}</style>
</head>
<body>
<canvas id="mycanvas" width="300" height="300">
</canvas>
</body>
</html>

<Data>

यह अपने data का मशीन द्वारा पढने योग्य वर्शन प्रदान करता हैं।

<Datalist>

यह Text के लिए ऑटो कम्पलीट फीचर Provide करता हैं।

<Details>

<Details> का उपयोग करके User की आवश्यकतानुसार अतिरिक्त जानकारी देने के लिए किया जाता हैं।

<details>
<summary>Click to reveal fun facts!</summary>
<p>A banana is a berry, but a strawberry is not.</p>
<p>The Amazon rainforest covers 40% of South America.</p>
<p>Elephants can't jump.</p>
</details>
Click to reveal fun facts!

A banana is a berry, but a strawberry is not.

The Amazon rainforest covers 40% of South America.

Elephants can’t jump.

<dialog>

यह एक window या dialog box को डिफाइन करता हैं।

<dialog open>Something went wrong!!!</dialog><br>
<dialog open>Thank You for Connecting.</dialog>






Something went wrong!!!

Thank You for Connecting.

<figcaption>

इसका उपयोग <figure> element के कैप्शन को डिफाइन करने के लिए किया जाता हैं।

<figure>

यह एक self-contained content जैसे Photos, Diagrams आदि को डिफाइन करता हैं।

<figure>
<figcaption>RKMS Sir</figcaption>
<img src="image_name.png" alt="RKMS Sir" width="100" height="80">
</figure>
RKMS Sir
RKMS Sir

<footer>

Document के footer को डिफाइन करता हैं।

<footer>
<address>
Postal Address: Door No.00, Shahabad ,Hardoi ,Uttar Pradesh ,India
</address>.
<p>Copyright © 2024 All rights reserved.</p>
</footer>
Postal Address: Door No.00, Shahabad ,Hardoi ,Uttar Pradesh ,India
.

Copyright © 2024 All rights reserved.

<header>

Document के header को डिफाइन करता हैं।

<!doctype html>
<article>
<header>
<h1>HTML</h1>
<h3>What is HTML?</h3>
<p>Today we are going to talk about HTML.</p>
</header>
<p>HTML stands for Hyper Text Markup Language. It is used to create a webpage.</p>
</article>

HTML

What is HTML?

Today we are going to talk about HTML.

HTML stands for Hyper Text Markup Language. It is used to create a webpage.

<main>

Document के main कंटेंट को डिफाइन करता हैं।

<mark>

Mark या हाईलाइट किए गए कंटेंट को स्पेशिफाई करता हैं।

<menuitem>

इसका उपयोग Context menu के साथ साथ list menu बनाने के लिए किया जाता हैं। एक <menu> एलिमेंट में एक या एक से अधिक <li> या <menuitem> एलिमेंट हो सकते हैं।

<!doctype html>
<h2> Example of Menu Tag</h2>
<menu>
<li>Home</li>
<Li> Registration</li>
<Li> Contact Us</li>
<Li> About Us</li>
</menu>

Example of Menu Tag

  • Home
  • Registration
  • Contact Us
  • About Us
  • <meter>

    इसका उपयोग किसी भी दी गई सीमा के भीतर scalar Value को मापने के लिए किया जाता हैं।

    <p> Dispaly a Gauge:</p>
    <meter value="40" min="1" max="100" >40 out of 100</meter><br>
    <meter value="0.8">75%</meter>

    Dispaly a Gauge:

    40 out of 100
    75%

    <nav>

    डॉक्यूमेंट में Navigation Link को डिफाइन करने के लिए किया जाता हैं।

    <!doctype html>
    <html>
    <head>
    <title>Title of the Document</title>
    </head>
    <body>
    <header>
    <h1>Computer Courses</h1>
    </header>
    <nav>
    <a href="MS Office.html">MS Office</a>| <a href="HTML.html">HTML</a>| <a href="Photoshop.html">Photoshop</a>| <a href="TallyErp9.html">Tally ERP 9</a>
    </nav>
    <marquee width="100%" behavior="Right" direction="left" scrollamount="10"><h2> Welcome to The Rising Computer Institute</h2></marquee>
    </body>
    <html>
    Title of the Document
    Computer Courses

    Welcome to The Rising Computer Institute

    <progress>

    कार्य की प्रगति को डिफाइन करता हैं।

    Downloading Progress
    <progress value="40" max="100"></progress>
    Downloading Progress

    <section>

    किसी डॉक्यूमेंट के section को डिफाइन करता हैं।

    <!doctype html>
    <html>
    <body>
    <section>
    <h1>Introduction of HTML5</h1>
    <p>HTML5 is the latest development of the standard that defines HTML. <br> The term represents two different concepts.</p>
    </section>
    <section>
    <h1>Hardware</h1>
    <p>Hardware is the physical parts of a computer.</p>
    </body>
    </html>
    
    Introduction of HTML5

    HTML5 is the latest development of the standard that defines HTML.
    The term represents two different concepts.

    Hardware

    Hardware is the physical parts of a computer.

    <summary>

    <details> Element के लिए शीर्षक को परिभाषित करता हैं।

    <svg>

    SVG (Scalable Vector Graphics) का उपयोग XML में 2D Graphics या Graphics Applications में किया जाता हैं। यह ज्यादातर Vector टाइप के डायग्राम जैसे:- पाई चार्ट, X, Y कोआर्डिनेट सिस्टम आदि में उपयोगी होता हैं। <svg> में प्रत्येक एलिमेंट और attribute को एनिमेट कर सकते हैं।

    <svg height="210" width="500">
      <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2">
    </svg>
    <svg width="100" height="100">
    <circle cx="60" cy="60" r="30" stroke="yellow" stroke--width="5" fill="red">
    </svg>
    <svg height="100" width="100">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red">
    </svg>
    <svg height="140" width="500">
      <ellipse cx="200" cy="80" rx="100" ry="50"
      style="fill:yellow;stroke:purple;stroke-width:2">
    </svg>
    <svg height="210" width="500">
      <polygon points="100,10 40,198 190,78 10,78 160,198"
      style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;">
    </svg>
    <svg width="400" height="180">
      <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
      style="fill:red;stroke:black;stroke-width:5;opacity:0.5">
    </svg>

    <video>

    <video> tag का उपयोग डॉक्यूमेंट में video embed करने के लिए किया जाता है। Supported video formats :- MP4/MPEG4,WebM, Ogg

    <!doctype html>
    <html>
    <head>
    <title>Title of the document</title>
    <style>video{width:300px;height:200px;border:1px solid #666;}
    </style>
    </head>
    <body>
    <video controls muted src="video_name.mp4">
    <track default kind="subtitles" srclang="en" src="video_name.mp4">
    </video>
    <p>About Video</p>
    </body>
    </html>
    Title of the document

    About Video

    2 Comments.

    Leave a Reply

    Your email address will not be published. Required fields are marked *