DIPLOMA IN COMPUTER OFFICE MANAGEMENT (DCOM): HTML

HTML

VISUAL STUDIO

HTML क्या है?

HTML हाइपर टेक्स्ट मार्कअप लैंग्वेज के लिए है HTML वेब पेज बनाने के लिए मानक मार्कअप भाषा है HTML एक वेब पेज की संरचना का वर्णन करता है HTML में तत्वों की एक श्रृंखला होती है HTML तत्व ब्राउज़र को सामग्री को प्रदर्शित करने का तरीका बताते हैं HTML तत्व सामग्री के टुकड़े जैसे "यह एक शीर्षक है", "यह एक पैराग्राफ है", "यह एक लिंक है", आदि।

एक साधारण HTML दस्तावेज़

उदाहरण :-

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

<! DOCTYPE html> घोषणा यह परिभाषित करती है कि यह दस्तावेज़ HTML5 दस्तावेज़ है

<Html> एलिमेंट एक HTML पेज का रूट एलिमेंट है

<Head> एलिमेंट में HTMLपेज के बारे में मेटा जानकारी होती है <Title> तत्व HTML पृष्ठ केलिए एक शीर्षक निर्दिष्टकरता है (जो ब्राउज़र के शीर्षकबार में या पृष्ठ के टैब मेंदिखाया गया है)

<Body> तत्व दस्तावेज़ केशरीर को परिभाषित करता है,और सभी दृश्य सामग्री के लिए एक कंटेनर है, जैसे शीर्षकों, पैराग्राफ, चित्र, हाइपरलिंक, टेबल, सूचियां, आदि।

<H1> तत्व एक बड़े शीर्षक को परिभाषित करता है

<P> तत्व एक अनुच्छेद को परिभाषित करता है

एक HTML तत्व क्या है?

अंतिम टैग द्वारा परिभाषित किया गया है:एक HTML तत्व एक स्टार्ट टैग, कुछ सामग्री और एक end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

HTML Page Structure

Below is a visualization of an HTML page structure:

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

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

<p>This is another paragraph.</p>

</body>

</html>

 कुछ HTML लिखें

निम्न HTML कोड को नोटपैड में लिखें या कॉपी करें:


फ़ाइल को अपने कंप्यूटर पर सहेजें। फ़ाइल का चयन करें> नोटपैड मेनू में सहेजें। 
फ़ाइल को "index.htm" नाम दें और एन्कोडिंग को UTF-8 (जो HTML फ़ाइलों के लिए पसंदीदा 
एन्कोडिंग है) सेट करें। अपने पसंदीदा ब्राउज़र में सहेजी गई HTML फ़ाइल खोलें (फ़ाइल पर डबल
 क्लिक करें, या राइट-क्लिक करें - और "ओपन विथ" चुनें)। 
हमारे मुफ्त ऑनलाइन संपादक के साथ, आप HTML कोड को संपादित कर सकते हैं और 
अपने ब्राउज़र में परिणाम देख सकते हैं।यह सही उपकरण है जब आप कोड को तेजी से परीक्षण
करना चाहते हैं। इसमें कलर कोडिंग और कोड को बचाने और दूसरों के साथ साझा करने की क्षमता
 भी है:
उदाहरण
<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>This is a Heading</h1>

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

</body>

</html>
HTML दस्तावेज़सभी HTML दस्तावेज़ों को एक दस्तावेज़ प्रकार घोषणा के साथ शुरू करना चाहिए: 
<! DOCTYPE html>
HTML दस्तावेज़ स्वयं <html> से शुरू होता है और </ html> से समाप्त होता है।
HTML दस्तावेज़ का दृश्य भाग <body> और </ body> के बीच है। 
<! DOCTYPE> घोषणा:- 
<! DOCTYPE> घोषणा दस्तावेज़ प्रकार का प्रतिनिधित्व करती है, और ब्राउज़र को वेब पेजों 
को सही ढंग से प्रदर्शित करने में मदद करती है। 
HTML5 के लिए <! DOCTYPE> घोषणा है:
यह केवल पृष्ठ के शीर्ष पर (किसी भी HTML टैग से पहले) दिखाई देना चाहिए।
 <! DOCTYPE> घोषणा संवेदनशील नहीं है।
<! DOCTYPE html>
HTML शीर्षकों 
HTML शीर्षकों को <h1> से <h6> टैग के साथ परिभाषित किया गया है।
 <h1> सबसे महत्वपूर्ण शीर्षक को परिभाषित करता है। 
<h6> कम से कम महत्वपूर्ण शीर्षक को परिभाषित करता है:
उदाहरण
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

<h3>This is heading 3</h3>
HTML पैराग्राफ
HTML पैराग्राफ को <p> टैग के साथ परिभाषित किया गया है:
उदाहरण
<p>This is a paragraph.</p>

<p>This is another paragraph.</p>
 HTML लिंक
HTML लिंक को <a> टैग से परिभाषित किया गया है:
उदाहरण
<a href="https://kbeti.blogspot.com"> यह एक लिंक है </a> लिंक का गंतव्य
 href विशेषता में निर्दिष्ट है।
विशेषताएँ HTML तत्वों के बारे में अतिरिक्त जानकारी प्रदान करने के लिए उपयोग की 
जाती हैं।
आप बाद के अध्याय में विशेषताओं के बारे में अधिक जानेंगे। 
HTML छवियाँ
HTML छवियों को <img> टैग के साथ परिभाषित किया गया है।
स्रोत फ़ाइल (src), वैकल्पिक पाठ (ऊँचाई), चौड़ाई और ऊँचाई को विशेषता के रूप में प्रदान
किया गया है:
उदाहरण
<img src="kbeti.jpg" alt="kbeti.com" width="104" height="142">
नेस्टेड HTML एलिमेंट्स
HTML तत्वों को नेस्ट किया जा सकता है (इसका मतलब है कि तत्वों में अन्य तत्व शामिल हो सकते हैं)।
सभी HTML दस्तावेज़ों में नेस्टेड HTML तत्व होते हैं।
निम्न उदाहरण में चार HTML तत्व (<html>, <body>, <h1> और <p>) हैं
उदाहरण
<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>
HTML तत्वों को खाली करें
बिना किसी सामग्री वाले HTML तत्वों को खाली तत्व कहा जाता है।
<br> टैग लाइन विराम को परिभाषित करता है, और समापन टैग के बिना एक खाली तत्व है:
उदाहरण
<p>This is a <br> paragraph with a line break.</p>
HTML विशेषताएँ
HTML विशेषताएँ HTML तत्वों के बारे में अतिरिक्त जानकारी प्रदान करती हैं।
सभी HTML तत्वों में विशेषताएँ हो सकती हैं गुण तत्वों के बारे में अतिरिक्त जानकारी 
प्रदान करते हैं
विशेषताएँ हमेशा शुरुआत टैग में निर्दिष्ट की जाती हैं
विशेषताएँ आमतौर पर नाम / मूल्य जोड़े में आती हैं जैसे: नाम = "मूल्य" 
अस् त गुण The href Attribute
<a> टैग हाइपरलिंक को परिभाषित करता है। Href विशेषता उस पृष्ठ के URL को
 निर्दिष्ट करती है जिस लिंक पर जाता है:
उदाहरण
<a href="https://kbeti.blogspot.com">Visit KBETI</a>
Src विशेषता
HTML पृष्ठ में छवि को एम्बेड करने के लिए <img> टैग का उपयोग किया जाता है। 
Src विशेषता प्रदर्शित की जाने वाली छवि के लिए पथ निर्दिष्ट करती है:
उदाहरण
<img src="img_boy.jpg">
चौड़ाई और ऊंचाई विशेषताएँ
<Img> टैग में चौड़ाई और ऊंचाई विशेषताएँ भी होनी चाहिए, जो छवि की चौड़ाई 
और ऊँचाई निर्दिष्ट करती हैं (पिक्सेल में):
उदाहरण
<img src="img_boy.jpg" width="500" height="600">
सबसे बड़ा गुण
<Img> टैग के लिए आवश्यक ऑल्ट विशेषता एक छवि के लिए एक वैकल्पिक पाठ 
निर्दिष्ट करती है, अगर किसी कारण के लिए छवि प्रदर्शित नहीं की जा सकती है।
 यह धीमे कनेक्शन, या src विशेषता में त्रुटि के कारण हो सकता है, या यदि
 उपयोगकर्ता स्क्रीन रीडर का उपयोग करता है।
उदाहरण
<img src="img_boy.jpg" alt="boy with a jeans">
HTML शीर्षकों
HTML शीर्षक शीर्षक या उपशीर्षक हैं जिन्हें आप वेबपृष्ठ पर प्रदर्शित करना चाहते हैं।
उदाहरण
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
HTML शीर्षकों
HTML शीर्षकों को <h1> से <h6> टैग के साथ परिभाषित किया गया है।
<h1> सबसे महत्वपूर्ण शीर्षक को परिभाषित करता है। 
<h6> कम से कम महत्वपूर्ण शीर्षक को परिभाषित करता है।
Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
बड़ा शीर्षक
प्रत्येक HTML शीर्षक का डिफ़ॉल्ट आकार होता है। हालांकि, आप सीएसएस फ़ॉन्ट-आकार
की संपत्ति का उपयोग करके शैली विशेषता के साथ किसी भी शीर्षक के लिए आकार 
निर्दिष्ट कर सकते हैं:उदाहरण
<h1 style="font-size:60px;">Heading 1</h1>
HTML Styles
HTML शैली विशेषता का उपयोग शैलियों को किसी तत्व में जोड़ने के लिए किया जाता है, जैसे कि रंग, फ़ॉन्ट, आकार और बहुत कुछ।
उदाहरण
I am Rose
I am Block
I am Black
HTML स्टाइल विशेषता
HTML तत्व की शैली सेट करना, शैली विशेषता के साथ किया जा सकता है। HTML शैली विशेषता में निम्नलिखित सिंटैक्स है: 
<tagname style="property:value;">  

फोंट्स (FONTS)
CSS फ़ॉन्ट-पारिवारिक संपत्ति HTML तत्व के लिए उपयोग किए जाने वाले फ़ॉन्ट को परिभाषित करती है: 
उदाहरण
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p 
टेक्स्ट का साइज़ (TEXT STYLE)
CSS फ़ॉन्ट-आकार की संपत्ति HTML तत्व के लिए पाठ आकार को परिभाषित करती है:
उदाहरण
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p> 

पाठ्य संरेखण (Text Alignment)
CSS पाठ-संरेखित गुण HTML तत्व के लिए क्षैतिज पाठ संरेखण को परिभाषित करता है:
उदाहरण
<h1 style="text-align:center;">Centered Heading</h1>
 <p style="text-align:center;">Centered paragraph.</p>
HTML स्वरूपण तत्व (Formatting element)
स्वरूपण तत्वों को विशेष प्रकार के पाठ प्रदर्शित करने के लिए डिज़ाइन किया गया था: 

तत्व (element)
HTML <b> और <strong> तत्व (element)
 HTML <b> तत्व बिना किसी अतिरिक्त महत्व के बोल्ड टेक्स्ट को परिभाषित करता है।
उदाहरण
<b>This text is bold</b>
HTML <strong> तत्व पाठ को मजबूत महत्व के साथ परिभाषित करता है। अंदर की सामग्री आमतौर पर बोल्ड में प्रदर्शित होती है।
उदाहरण
<strong>This text is important!</strong>
HTML <i> और <em> तत्व
HTML <i> तत्व वैकल्पिक स्वर या मनोदशा में पाठ के एक भाग को परिभाषित करता है। अंदर की सामग्री आम तौर पर इटैलिक में प्रदर्शित की जाती है।
युक्ति (Tip): <i> टैग का उपयोग अक्सर एक तकनीकी शब्द, दूसरी भाषा के वाक्यांश, एक विचार, एक जहाज का नाम, आदि के लिए किया जाता है।
उदाहरण
<i>This text is italic</i>
HTML <em> तत्व परिभाषित पाठ को परिभाषित करता है। अंदर की सामग्री आम तौर पर इटैलिक में प्रदर्शित की जाती है।
उदाहरण
<em>This text is emphasized</em>
 HTML <small> तत्व
HTML <small> तत्व छोटे पाठ को परिभाषित करता है:
उदाहरण
<small>This is some smaller text.</small>
HTML <चिह्न> तत्व
 HTML <mark> तत्व पाठ को परिभाषित करता है जिसे चिह्नित या हाइलाइट किया जाना चाहिए:
उदाहरण
<p>Do not forget to buy <mark>milk</mark> today.</p>
HTML <del> तत्व
HTML <del> तत्व एक दस्तावेज़ से हटाए गए पाठ को परिभाषित करता है। ब्राउज़र आमतौर पर हटाए गए पाठ के माध्यम से एक रेखा पर हमला करेंगे:
उदाहरण
<p>My favorite color is <del>blue</del> red.</p>
HTML <ins> तत्व
HTML <ins> तत्व एक पाठ को परिभाषित करता है जिसे दस्तावेज़ में डाला गया है। ब्राउज़र आमतौर पर सम्मिलित पाठ को रेखांकित करेंगे:
उदाहरण
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
HTML <sub> तत्व
 HTML <उप> तत्व सबस्क्रिप्ट टेक्स्ट को परिभाषित करता है। सब्स्क्रिप्ट टेक्स्ट सामान्य रेखा से आधा वर्ण नीचे दिखाई देता है, और कभी-कभी एक छोटे फ़ॉन्ट में प्रदान किया जाता है। सब्स्क्रिप्ट टेक्स्ट का उपयोग रासायनिक फॉर्मूलों के लिए किया जा सकता है, जैसे CO2:
उदाहरण
<p>This is <sub>subscripted</sub> text.</p>

HTML <sup> तत्व
 HTML <sup> तत्व सुपरस्क्रिप्ट टेक्स्ट को परिभाषित करता है। सुपरस्क्रिप्ट टेक्स्ट सामान्य रेखा से आधा वर्ण ऊपर दिखाई देता है, और कभी-कभी एक छोटे फ़ॉन्ट में प्रदान किया जाता है। सुपरस्क्रिप्ट टेक्स्ट का उपयोग WWW जैसे फुटनोट्स के लिए किया जा सकता है:
उदाहरण
<p>This is <sup>superscripted</sup> text.</p>
☺☺☺✌✌
रंग समूह COLOR Group
HTML रंग समूह 
सभी आधुनिक ब्राउज़र निम्नलिखित 140 रंग नामों का समर्थन करते हैं (रंग नाम या एक हेक्स मान के कोड नीचे इस प्रकार है, रंग को पृष्ठभूमि-रंग के साथ-साथ विभिन्न पाठ रंगों के रूप में देखने के लिए):
 रंग सिद्धांत   
Color Theory   
रंग सिद्धांत श्रेणियों, परिभाषाओं और अवधारणाओं की एक भीड़ है। यह 
ट्यूटोरियल उन भागों को कवर करता है जो वेब डिज़ाइन के
लिए सबसे उपयोगी हैं:
प्रकाश का रंग :- सर आइजैक न्यूटन ने सिद्धांत विकसित किया कि सभी रंग लाल, हरे और नीले प्रकाश के मिश्रण हैं। इसके परिणामस्वरूप 1666 में पहला ज्ञात रंग चक्र बना।
चित्रकारी का रंग
1766 में वैज्ञानिक मूसा हैरिस ने प्राथमिक रंगों के रूप में लाल, पीले और नीले रंग को वर्गीकृत करने के लिए पहला रंग पहिया बनाया। मूसा हैरिस ने पेंट के साथ काम किया (न्यूटन ने प्रकाश के साथ काम किया) एक सिद्धांत (एक फ्रांसीसी चित्रकार द्वारा) के बाद कि सभी रंग लाल, पीले और नीले रंग के मिश्रण हैं।
                                                                    
सीमा रंग  
आप सीमाओं का रंग निर्धारित कर सकते हैं:
You can set the color of borders:
Hello World
Hello World
Hello Worldउदाहरण
<h1 style="border:2px solid Tomato;">Hello World</h1><h1 style="border:2px solid DodgerBlue;">Hello World</h1><h1 style="border:2px solid Violet;">Hello World</h1>
पृष्ठभूमि का रंग (Background Color)
CSS पृष्ठभूमि-रंग गुण HTML तत्व के लिए पृष्ठभूमि रंग को परिभाषित करता है। 
उदाहरण
पृष्ठभूमी के लिए पृष्ठभूमी रंग सेट करें: 
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>    
उदाहरण
दो अलग-अलग तत्वों के लिए पृष्ठभूमि रंग सेट करें:
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body> 
लिखावट का रंग (TEXT COLOR)
CSS रंग गुण HTML तत्व के लिए पाठ रंग को परिभाषित करता है:
उदाहरण
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p> 

 लिंक (Link)
HTML लिंक (Link)- सिंटैक्स 
HTML <a> टैग हाइपरलिंक को परिभाषित करता है। इसमें निम्नलिखित सिंटैक्स है:
<a href="url">link text</a>
<a> तत्व का सबसे महत्वपूर्ण गुण href विशेषता है, जो लिंक के गंतव्य को इंगित करता है।लिंक पाठ वह हिस्सा है जो पाठक को दिखाई देगा। लिंक पाठ पर क्लिक करने से, पाठक को निर्दिष्ट URL पते पर भेजा जाएगा।
Example   
<a href="https://kbeti.blogspot.com/">Visit kbeti.blogspot.com!</a>
HTML लिंक - लक्ष्य विशेषता
 डिफ़ॉल्ट रूप से, लिंक किए गए पृष्ठ को वर्तमान ब्राउज़र विंडो में प्रदर्शित किया जाएगा। इसे बदलने के लिए, आपको लिंक के लिए एक और लक्ष्य बताना होगा।
लक्षित विशेषता निर्दिष्ट दस्तावेज़ को खोलने के लिए कहाँ निर्दिष्ट करती है।
लक्ष्य विशेषता में निम्न मान हो सकते हैं:
_self - डिफ़ॉल्ट। दस्तावेज़ को उसी विंडो / टैब में खोलता है जैसे उसे क्लिक किया गया था
_blank - दस्तावेज़ को एक नई विंडो या टैब में खोलता है
_parent - मूल फ़्रेम में दस्तावेज़ खोलता है
_top - विंडो के पूर्ण शरीर में दस्तावेज़ खोलता है
उदाहरण
नई ब्राउज़र विंडो या टैब में लिंक किए गए दस्तावेज़ को खोलने के लिए लक्ष्य = "_ blank" का उपयोग करें:
<a href="https://kbeti.blogspot.com/" target="_blank">Visit kbeti!</a>

निरपेक्ष(Absolute) URL बनाम सापेक्ष(Relative) URL
उपरोक्त दोनों उदाहरण href विशेषता में एक निरपेक्ष URL (एक पूर्ण वेब पते) का उपयोग कर रहे हैं। एक स्थानीय लिंक (उसी वेबसाइट के भीतर एक पृष्ठ का लिंक) एक रिश्तेदार URL ("https: // www" भाग के बिना) के साथ निर्दिष्ट है
 
उदाहरण
<h2>Absolute URLs</h2>
<p><a href="https://kbeti.blogspot.com/">kbeti</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

HTML लिंक - एक लिंक के रूप में एक छवि का उपयोग करें 
एक लिंक के रूप में एक छवि का उपयोग करने के लिए, बस <img> टैग को <a> टैग के अंदर रखें:उदाहरण
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
एक ईमेल पते से लिंक करें
Mailto का उपयोग करें: उपयोगकर्ता को ईमेल प्रोग्राम खोलने वाला लिंक बनाने के लिए href विशेषता के अंदर (उन्हें एक नया ईमेल भेजने के लिए):
उदाहरण
<a href="mailto:someone@example.com">Send email</a>
एक लिंक के रूप में बटन
एक लिंक के रूप में HTML बटन का उपयोग करने के लिए, आपको कुछ जावास्क्रिप्ट कोड जोड़ना होगा।
जावास्क्रिप्ट आपको निर्दिष्ट करने की अनुमति देता है कि कुछ घटनाओं पर क्या होता है, जैसे कि एक बटन पर क्लिक:
उदाहरण
<button onclick="document.location='default.asp'">HTML Tutorial</button>
लिंक शीर्षक
शीर्षक विशेषता किसी तत्व के बारे में अतिरिक्त जानकारी निर्दिष्ट करती है। जानकारी को अक्सर टूलटिप पाठ के रूप में दिखाया जाता है जब माउस तत्व पर चलता है।
उदाहरण
<a href="https://kbeti.blogspot.com/html/" title="Go to kbeti HTML section">Visit our HTML Tutorial</a>
निरपेक्ष यूआरएल और सापेक्ष URL पर अधिक
उदाहरण
वेब पेज से लिंक करने के लिए एक पूर्ण URL का उपयोग करें:<a href="https://kbeti.blogspot.com/html/default.asp">HTML tutorial</a>
उदाहरण
वर्तमान वेब साइट पर HTML फ़ोल्डर में स्थित पृष्ठ से लिंक करें:<a href="/html/default.asp">HTML tutorial</a
उदाहरण
वर्तमान पृष्ठ के समान फ़ोल्डर में स्थित पृष्ठ से लिंक करें:<a href="default.asp">HTML tutorial</a>
HTML छवियाँ
छवियाँ डिजाइन और वेब पेज की उपस्थिति में सुधार कर सकती हैं।
उदाहरण
<img src="pic_rose.jpg" alt="indian rose">
उदाहरण
<img src="img_boy.jpg" alt="boy in a jeans">

छवियाँ (IMAGE)
HTML छवियाँ (IMAGE)
सिंटैक्सHTML <img> टैग का उपयोग किसी वेब पेज में एक छवि को एम्बेड करने के लिए किया जाता है।
छवियां तकनीकी रूप से एक वेब पेज में नहीं डाली जाती हैं; छवियाँ वेब पृष्ठों से जुड़ी हुई हैं। <Img> टैग संदर्भित छवि के लिए एक होल्डिंग स्थान बनाता है।
<Img> टैग खाली है, इसमें केवल विशेषताएँ हैं, और इसमें क्लोजिंग टैग नहीं है।
<Img> टैग में दो आवश्यक विशेषताएँ हैं:
वाक्य - विन्यास (Syntax)
<img src="url" alt="alternatetext">
छवि का आकार - चौड़ाई और ऊँचाई
आप किसी छवि की चौड़ाई और ऊंचाई निर्दिष्ट करने के लिए शैली विशेषता का उपयोग कर सकते हैं।
उदाहरण
<img src="img_boy.jpg" alt="boy in a jeans" style="width:500px;height:600px;">
वैकल्पिक रूप से, आप चौड़ाई और ऊंचाई विशेषताओं का उपयोग कर सकते हैं:
उदाहरण
<img src="img_boy.jpg" alt="boy in a jeans" width="500" height="600">
एनिमेटेड छवियाँ
HTML एनिमेटेड GIFs की अनुमति देता है:
उदाहरण
<img src="software.gif" alt="flying machine" style="width:48px;height:48px;">
एक लिंक के रूप में छवि
एक लिंक के रूप में एक छवि का उपयोग करने के लिए, <a> टैग के अंदर <img> टैग डालें:
उदाहरण
<a href="default.asp">
  <img src="rocket.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
इमेज फ्लोटिंग
छवि के दाईं ओर या पाठ के बाईं ओर जाने के लिए CSS फ्लोट संपत्ति का उपयोग करें:
उदाहरण
<p><img src="rocket.gif" alt="rocket launcher" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="rocket.gif" alt="rocket launcher" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
आम छवि प्रारूप
यहां सबसे सामान्य छवि फ़ाइल प्रकार हैं, जो सभी ब्राउज़रों (क्रोम, एज, फ़ायरफ़ॉक्स, सफारी, ओपेरा) में समर्थित हैं:
अध्याय का सारांश
छवि को परिभाषित करने के लिए HTML <img> तत्व का उपयोग करें
छवि के URL को परिभाषित करने के लिए HTML src विशेषता का उपयोग करें
यदि यह प्रदर्शित नहीं किया जा सकता है, तो किसी छवि के लिए वैकल्पिक पाठ को परिभाषित करने के लिए HTML ऑल्ट विशेषता का उपयोग करें
छवि की आकार को परिभाषित करने के लिए HTML चौड़ाई और ऊंचाई विशेषताओं या CSS चौड़ाई और ऊंचाई गुणों का उपयोग करें
छवि को बाईं या दाईं ओर तैरने के लिए CSS फ्लोट संपत्ति का उपयोग करें
HTML छवि टैग 

वर्गीकरण (CLASS) 
HTML वर्ग (Class) विशेषता
HTML क्लास की विशेषता का उपयोग HTML तत्व के लिए एक क्लास निर्दिष्ट करने के लिए किया जाता है।
एकाधिक HTML तत्व एक ही वर्ग साझा कर सकते हैं।
वर्ग गुण का उपयोग करना :- क्लास की विशेषता अक्सर एक स्टाइल शीट में एक क्लास के नाम को इंगित करने के लिए उपयोग की जाती है। इसका उपयोग जावास्क्रिप्ट द्वारा विशिष्ट वर्ग नाम के साथ तत्वों तक पहुंचने और हेरफेर करने के लिए भी किया जा सकता है।
निम्नलिखित उदाहरण में हमारे पास "शहर" के मूल्य के साथ एक वर्ग विशेषता वाले तीन <div> तत्व हैं। सभी तीन <div> तत्वों को सिर अनुभाग में .City शैली परिभाषा के अनुसार समान रूप से स्टाइल किया जाएगा:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>
निम्नलिखित उदाहरण में हमारे पास "नोट" के मूल्य के साथ एक वर्ग विशेषता वाले दो <span> तत्व हैं। दोनों <span> तत्वों को हेड अनुभाग में .note शैली परिभाषा के अनुसार समान रूप से स्टाइल किया जाएगा:
<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>
CLASS के लिए सिंटैक्स
एक वर्ग बनाने के लिए; एक वर्ग नाम के बाद की अवधि (?) वर्ण लिखें। फिर, घुंघराले ब्रेस के भीतर सीएसएस गुणों को परिभाषित करें {}:
उदाहरण
"शहर" नाम का एक वर्ग बनाएं:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>
एकाधिक वर्ग (Multiple Classes) 
HTML तत्व एक से अधिक वर्ग के हो सकते हैं।
कई वर्गों को परिभाषित करने के लिए, कक्षा के नामों को एक स्थान के साथ अलग करें, उदा। <div class = "city main">। तत्व को निर्दिष्ट सभी वर्गों के अनुसार स्टाइल किया जाएगा।
निम्नलिखित उदाहरण में, पहला <h2> तत्व शहर वर्ग और मुख्य वर्ग दोनों के अंतर्गत आता है, और दोनों वर्गों से सीएसएस शैली प्राप्त करेंगे:
उदाहरण
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
विभिन्न तत्व समान कक्षा साझा कर सकते हैं
विभिन्न HTML तत्व एक ही वर्ग के नाम को इंगित कर सकते हैं।निम्नलिखित उदाहरण में, दोनों <h2> और <p> "शहर" वर्ग को इंगित करते हैं और एक ही शैली साझा करेंगे:
उदाहरण
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

जावास्क्रिप्ट में वर्ग गुण का उपयोग
विशिष्ट तत्वों के लिए कुछ कार्य करने के लिए जावास्क्रिप्ट द्वारा वर्ग नाम का भी उपयोग किया जा सकता है।
जावास्क्रिप्ट तत्वों को एक विशिष्ट वर्ग के नाम के साथ एक्सेस कर सकता है getElementsByClassName() तरीका:
उदाहरण
वर्ग नाम "शहर" के साथ सभी तत्वों को छिपाने के लिए एक बटन पर क्लिक करें:
<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

तालिका (TABLE)
एक HTML तालिका परिभाषित करें
<तालिका> टैग एक HTML तालिका को परिभाषित करता है।
प्रत्येक तालिका पंक्ति को <tr> टैग के साथ परिभाषित किया गया है। प्रत्येक तालिका शीर्ष लेख को <th> टैग के साथ परिभाषित किया गया है। प्रत्येक टेबल डेटा / सेल को <td> टैग के साथ परिभाषित किया गया है।डिफ़ॉल्ट रूप से, <th> तत्वों में पाठ बोल्ड और केंद्रित है।
डिफ़ॉल्ट रूप से, पाठ <td> तत्व नियमित और बाएं-संरेखित होते हैं।
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
HTML तालिका - एक सीमा जोड़ें
किसी बॉर्डर को टेबल पर जोड़ने के लिए, CSS बॉर्डर प्रॉपर्टी का उपयोग करें:
table, th, td {
  border: 1px solid black;
}
HTML तालिका - टूटी हुई सीमाएँ
सीमाओं को एक सीमा में गिरने देने के लिए, CSS बॉर्डर-पतन संपत्ति जोड़ें:
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
HTML तालिका - सेल पैडिंग जोड़ें
सेल पैडिंग सेल सामग्री और उसकी सीमाओं के बीच की जगह को निर्दिष्ट करता है।
यदि आप एक गद्दी निर्दिष्ट नहीं करते हैं, तो तालिका कोशिकाओं को बिना गद्दी के प्रदर्शित किया जाएगा।
पैडिंग सेट करने के लिए, CSS पैडिंग प्रॉपर्टी का उपयोग करें:
th, td {
  padding: 15px;
}
HTML तालिका - वाम-संरेखित शीर्षक
डिफ़ॉल्ट रूप से, तालिका शीर्षक बोल्ड और केंद्रित होते हैं।
तालिका शीर्षकों को बाएं-संरेखित करने के लिए, CSS पाठ-संरेखित गुण का उपयोग करें:
th {
  text-align: left;
}
HTML तालिका - बॉर्डर रिक्ति जोड़ें
बॉर्डर रिक्ति कोशिकाओं के बीच के स्थान को निर्दिष्ट करती है।
तालिका के लिए बॉर्डर स्पेसिंग सेट करने के लिए, CSS बॉर्डर-स्पेसिंग संपत्ति का उपयोग करें:
table {
  border-spacing: 5px;
}
HTML तालिका - सेल जो कई कॉलमों को फैलाती है
सेल स्तंभ को एक से अधिक स्तंभ बनाने के लिए, कोल्पेशन विशेषता का उपयोग करें:
<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>
HTML तालिका - सेल जो कई पंक्तियों को फैलाती है 
एक सेल स्पैन को एक से अधिक पंक्ति बनाने के लिए, रोस्पैन विशेषता का उपयोग करें:
<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>
HTML तालिका - एक कैप्शन जोड़ें
किसी तालिका में कैप्शन जोड़ने के लिए, <कैप्शन> टैग का उपयोग करें:<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
एक तालिका के लिए एक विशेष शैली
एक विशेष तालिका के लिए एक विशेष शैली को परिभाषित करने के लिए, तालिका में एक आईडी विशेषता जोड़ें:
<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
अब आप इस तालिका के लिए एक विशेष शैली को परिभाषित कर सकते हैं:
#t01 {
  width: 100%;
  background-color: #f1f1c1;
}
और अधिक शैलियाँ जोड़ें:
#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}
अध्याय का सारांश (Summary) 
तालिका को परिभाषित करने के लिए HTML <तालिका> तत्व का उपयोग करें
तालिका पंक्ति को परिभाषित करने के लिए HTML <tr> तत्व का उपयोग करें
तालिका डेटा को परिभाषित करने के लिए HTML <td> तत्व का उपयोग करें
तालिका शीर्षक को परिभाषित करने के लिए HTML <th> तत्व का उपयोग करें
तालिका कैप्शन को परिभाषित करने के लिए HTML <कैप्शन> तत्व का उपयोग करें
सीमा को परिभाषित करने के लिए सीएसएस सीमा संपत्ति का उपयोग करें
सेल बॉर्डर को ढहाने के लिए CSS बॉर्डर-पतन प्रॉपर्टी का उपयोग करें
cells में पैडिंग जोड़ने के लिए CSS पैडिंग प्रॉपर्टी का उपयोग करें
सेल पाठ संरेखित करने के लिए CSS पाठ-संरेखित गुण का उपयोग करें
सेल के बीच रिक्ति सेट करने के लिए CSS बॉर्डर-स्पेसिंग प्रॉपर्टी का उपयोग करें
एक सेल स्पैन को कई कॉलम बनाने के लिए कोलस्पैन विशेषता का उपयोग करें
सेल स्पैन को कई पंक्तियों को बनाने के लिए रोस्पैन विशेषता का उपयोग करें
एक तालिका को विशिष्ट रूप से परिभाषित करने के लिए आईडी विशेषता का उपयोग करें