HTML में Style Attribute का उपयोग कैसे करें

Style attribute HTML में एक attribute है, जिसका उपयोग किसी specific element पर CSS (Cascading Style Sheets) को directly लागू करने के लिए किया जाता है। यह attribute inline CSS को define करता है और HTML element के साथ-साथ उसकी styling को एक ही जगह पर specify करता है।

HTML में किसी element की style सेट करने के लिए style attribute का उपयोग किया जाता है। यह attribute CSS properties को inline तरीके से HTML element पर लागू करता है।

Syntax:

<tagname style="property:value;">Content

</tagname>

<tagname>: HTML element का नाम (जैसे <p>, <h1>, <div>)।

style: यह attribute है, जिसका उपयोग CSS properties को define करने के लिए होता है।

property:value;: CSS की property और उसका मान, जिसे आप लागू करना चाहते हैं।

Note: CSS properties और values को semicolon (;) से अलग किया जाता है।

Example:

<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue;">This is a blue heading</h1>

<h2 style="color:green;">This is a green heading.</h2>

<P style="background-color: yellow;">This is a yellow background.</p>

</body>

</html>

इस कोड का output इस प्रकार होगा।

Style Attribute Example

This is a blue heading

This is a green paragraph with larger text.

This is a div with yellow background.

दो अलग अलग elements के लिए background colour

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color: green;">This is a heading</h1>

<p style="background-color:pink;">This is a paragraph.</p>

</body>

</html>

ऊपर वाले कोड के लिये आउटपुट

This is a heading

This is a paragraph.

पेज के लिए background colour

<!DOCTYPE html>

<html>

<h1>This is a heading</h1>

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

</body>

</html>

HTML element के text के लिए font

font-family प्रॉपर्टी का उपयोग किसी HTML element के text के लिए font सेट करने के लिए किया जाता है।

यह प्रॉपर्टी बताती है कि टेक्स्ट को किस font style में दिखाना है। यदि पहला font उपलब्ध न हो, तो browser दूसरा font उपयोग करता है।

Syntax:

font-family: "font1", "font2", generic-family;

font1: प्राथमिक (primary) font।

font2: वैकल्पिक (fallback) font।

generic-family: एक सामान्य श्रेणी का font (जैसे, serif, sans-serif, monospace)।

नोट: ब्राउज़र fallback font तभी उपयोग करता है, जब प्राथमिक font उपलब्ध न हो।

<!DOCTYPE html>

<html>

<body>

<h1 style="font-family:times new roman;">This is a heading</h1>

<p style="font-family:verdana;">This is a paragraph.</p>

</body>

</html>

ऊपर वाले code का output

This is a heading

This is a paragraph.

Text-Size

font-size प्रॉपर्टी का उपयोग HTML element के text की size (आकार) सेट करने के लिए किया जाता है। यह प्रॉपर्टी बताती है कि text छोटा, बड़ा या medium आकार का दिखना चाहिए। इसे अलग-अलग units (जैसे pixels, em, rem, percentages) में specify किया जा सकता है।

Syntax:

font-size: value;

Absolute Sizes:

xx-small, x-small, small, medium, large, x-large, xx-large
ये fixed sizes होती हैं।

Relative Sizes:

smaller, larger (parent element के relative)।

Length Units:

px (pixels), em, rem, %, vw, vh
ये responsive और flexible sizes के लिए उपयोग होती हैं।

Example:

<!DOCTYPE html>

<html>

<body>

<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>

</body>

</html>

ऊपर वाले code का output

This is a heading

This is a paragraph.

Example:

<!DOCTYPE html>

<html>

<body>

</body>

</html>

ऊपर वाले code का output

XXX

text-align

text-align प्रॉपर्टी का उपयोग किसी HTML element के text को horizontally (क्षैतिज रूप से) align करने के लिए किया जाता है।

यह प्रॉपर्टी यह निर्धारित करती है कि text left, right, center, या justify alignment में दिखेगा।

Syntax:

text-align: value;

Values:

left: Text को बाईं तरफ align करता है।
right: Text को दाईं तरफ align करता है।
center: Text को center में align करता है।
justify: Text को दोनों किनारों पर align करता है, जिससे text एक column जैसा दिखता है।
start: Text को document के default प्रारंभिक दिशा में align करता है (LTR या RTL पर निर्भर)।
end: Text को document की default अंतिम दिशा में align करता है।

Example:

<!DOCTYPE html>

<html>

<body>

<h1 style="text-align:center;">Centered Heading</h1>

<h2 style="text-align:left;">left Heading</h2>

<p style="text-align:right;">right paragraph.</p>

</body>

</html>

इस code का output

Centered Heading

left Heading

right paragraph.

size and colour

Size and colour का use साथ साथ कैसे होता है देखिए।

<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue;font-size:900%;">XXXXX</h1>

</body>

</html>

इस code का output

XXXX

Different Colour

<!DOCTYPE html>

<html>

<body>

<h1>

</h1>

</body>

</html>

इस code का output

X X X X

Colour Animation:

<!DOCTYPE html>

<html>

<head>

<style>

/* Animation for changing colors */

@keyframes colorChange {

0% { color: red; }

25% { color: blue; }

50% { color: green; }

75% { color: orange; }

100% { color: red; }

}

/* Common style for each X */

.animated {

font-size: 900%; /* Font size set to 900% */

animation: colorChange 4s infinite; /* Animation duration is 4 seconds */

}

/* Adding delay for individual spans */

.x1 { animation-delay: 0s; }

.x2 { animation-delay: 1s; }

.x3 { animation-delay: 2s; }

.x4 { animation-delay: 3s; }

</style>

</head>

<body>

<h1>

</h1>

</body>

</html>

इस code का आउटपुट:

X X X X

HTML में Style Attribute का उपयोग कैसे करें

HTML में Style Attribute का उपयोग किसी भी element की styling को control करने के लिए एक आसान और प्रभावी तरीका है। यह attribute inline styling के लिए उपयोग होता है, जो specific element की appearance को तुरंत बदलने में मदद करता है।

चाहे text का color बदलना हो, font size सेट करना हो, या background color जोड़ना हो, Style Attribute HTML को अधिक आकर्षक और user-friendly बनाने में सहायक है। हालांकि, बड़े प्रोजेक्ट्स में maintainability के लिए CSS files का उपयोग बेहतर होता है।

HTML Basic Guide for Beginners in Hindi

Code द्वारा google drive की images कैसे show करें

HTML Kya Hai ? Main Elements of HTML in Hindi

Best HTML Editors Website बनाने के लिए

Code द्वारा google drive की images कैसे show करें

Google Drive की image को HTML में img tag और src attribute के माध्यम से उपयोग करना थोड़ा tricky हो सकता है, क्योंकि Google Drive की direct URLs embed के लिए काम नहीं करतीं। नीचे स्टेप्स दिए गए हैं, जो आपको इसे सही तरीके से उपयोग करने में मदद करेंगे:

सबसे पहले, अपनी image को Google Drive में अपलोड करें।

Image की Shareable Link Generate करें:

Google Drive में image पर right-click करें।

Manage access विकल्प चुनें।

Link को "Anyone with the link" पर सेट करें और Copy करें।

Code द्वारा google drive की images कैसे show करें

एक popup खुलेगा जिसमें लिखा होगा "Restricted" या "Anyone with the link"।

"Restricted" को बदलकर "Anyone with the link" कर दें।

Permission को "Viewer" पर सेट करें ताकि users image को केवल देख सकें।

"Copy Link" पर क्लिक करें और इसे save कर लें।

Embed Link Generate करें (Optional):

अगर आप image को HTML में img tag के लिए उपयोग करना चाहते हैं, तो इस link को embed format में बदलें:

Example के तौर पर मैं google drive पर पड़ी हुई एक image का example link प्रस्तुत कर रहा हूं।

Example link

https://drive.google.com/file/d/1jwGaO0vphMV4CKVMvcj4O1TU7o1ATvkD/view?usp=drivesdk

Embed Format

https://drive.google.com/uc?export=view&id=1jwGaO0vphMV4CKVMvcj4O1TU7o1ATvkD

Embed format का मतलब

Embed Format का मतलब है किसी external resource (जैसे image, video, audio, या document) को किसी अन्य प्लेटफ़ॉर्म या webpage में शामिल करना, ताकि वह content उसी पेज पर directly दिखाई या चल सके।

यह external content को link करने के बजाय उसे webpage में seamlessly integrate करने का तरीका है।

Complete code:

<!DOCTYPE html>

<html>

<body>

<h1>Google Drive से Image</h1>

<p>नीचे दी गई image Google Drive से embed की गई है:</p>

</body>

</html>

कोड को किसी text editor के html सेक्शन में सेव करें।

Browser में फाइल को ओपन करें।

यदि image अभी भी शो नहीं हो रही है, तो निम्न जांचें:

Embed Link को फिर से Validate करें।

Public Link Confirm करें।

अगर सभी settings सही हैं और image नहीं दिख रही है, तो Google Drive की link embedding में समस्या हो सकती है। इस स्थिति में, आप निम्न विकल्प ट्राई करें:

Image को अन्य hosting platform (जैसे Imgur) पर अपलोड करें।

उस hosting platform का direct URL उपयोग करें।

Embed Format का महत्व:

Seamless Integration:

External content को webpage पर directly दिखाने का आसान तरीका।

Dynamic Content:

Videos, audios, documents, और images को dynamically load किया जा सकता है।

User-Friendly Experience:

Users को अलग-अलग platforms पर जाने की ज़रूरत नहीं होती।

Code द्वारा Google Drive की Images कैसे Show करें

Google Drive पर उपलब्ध images को वेबपेज पर दिखाना एक आसान प्रक्रिया है, लेकिन इसमें सही कोड और लिंक फॉर्मेट का उपयोग करना आवश्यक है। सबसे पहले, Google Drive में image की visibility को "Anyone with the link" पर सेट करना होता है ताकि image publically accessible हो। इसके बाद, image के लिंक से उसका File ID निकालकर उसे embed format में बदलें, जैसे:

https://drive.google.com/uc?export=view&id=FILE_ID

इसके बाद, HTML कोड में <img> टैग का उपयोग करके image को वेबपेज पर दिखाया जा सकता है। उदाहरण के लिए:

इस प्रक्रिया के माध्यम से आप Google Drive की images को seamless तरीके से अपने वेबपेज पर embed कर सकते हैं। यह तरीका user-friendly और dynamic web content बनाने के लिए अत्यंत उपयोगी है।

Read Also

Src Attribute के उपयोग

HTML Attributes Kya Hai? Beginners ke liye complete guide

HTML Basic Guide for Beginners in Hindi

Best HTML Editors Website बनाने के लिए

HTML Kya Hai ? Main Elements of HTML in Hindi

HTML में Style Attribute का उपयोग कैसे करें

General Awareness

HTML में Style Attribute का उपयोग कैसे करें

Syntax:

Example:

This is a blue heading

(adsbygoogle = window.adsbygoogle || []).push({}); दो अलग अलग elements के लिए background colour

This is a heading

(adsbygoogle = window.adsbygoogle || []).push({}); HTML element के text के लिए font

Syntax:

This is a heading

Text-Size

Syntax:

This is a heading

Example:

XXX

text-align (adsbygoogle = window.adsbygoogle || []).push({});

Syntax:

Centered Heading

left Heading

size and colour

XXXX

Different Colour

X X X X

Colour Animation:

X X X X

HTML में Style Attribute का उपयोग कैसे करें

Read Also

Code द्वारा google drive की images कैसे show करें

Image की Shareable Link Generate करें:

Embed Link Generate करें (Optional):

Embed Format का महत्व:

Code द्वारा Google Drive की Images कैसे Show करें

Read Also

दो अलग अलग elements के लिए background colour

HTML element के text के लिए font

text-align