HTML Background Colors & Images
आपके वेब पेज की
पृष्ठभूमि को सजाने के दो तरीके हैं।
1 Html Background Colors
2 Html Background Images
Patterned & Transparent Backgrounds:
आपने विभिन्न
वेबसाइटों पर कई पैटर्न या पारदर्शी पृष्ठभूमि देखी होगी। यह बस बैकग्राउंड में
पॉटरेंड इमेज या पारदर्शी इमेज का उपयोग करके प्राप्त किया जा सकता है।
यह सुझाव दिया
जाता है कि पैटर्न या पारदर्शी gif बनाते समय, यदि संभव हो तो 1x1 जितना छोटा भी
संभव हो छोटे आयामों का उपयोग करें। बड़ी फाइलें धीमी गति से लोड होती हैं और आपकी
साइटों के लोड समय को रोकती हैं।
यहां एक तालिका
की पृष्ठभूमि पैटर्न सेट करने के लिए उदाहरण दिए गए हैं।
<!--
How to set a table background using pattrern -->
<table
background="/images/pattern1.gif" width="100%" height="100">
<tr><td>
This
background is filled up with a pattern image.
</td></tr>
</table>
<!--
Another example on table background using pattrern -->
<table
background="/images/pattern2.gif" width="100%" height="100">
<tr><td>
This
background is filled up with a pattern image.
</td></tr>
</table>
HTML Styles – CSS
HTML तत्वों को स्टाइल
करने के लिए CSS (कैस्केडिंग
स्टाइल शीट्स) का उपयोग किया जाता है।
Styling HTML with CSS
HTML तत्वों को बेहतर
तरीके से प्रदान करने के लिए, HTML 4 के साथ सीएसएस को एक साथ पेश किया गया था।
CSS को निम्न तरीकों
से HTML में जोड़ा जा
सकता है:
1 Inlineइनलाइन - HTML तत्वों में शैली विशेषता का उपयोग करना
2 Internalआंतरिक - <head> अनुभाग में <style> तत्व का उपयोग करना
3 External बाहरी - बाहरी CSS फ़ाइल का उपयोग करना
CSS को HTML में जोड़ने का पसंदीदा तरीका, CSS CSS को अलग CSS फाइलों में डालना है।
हालाँकि, इस HTML ट्यूटोरियल में हम आपको स्टाइल विशेषता का उपयोग करके CSS से परिचित कराएंगे। यह उदाहरणों को सरल बनाने
के लिए किया जाता है। यह आपके लिए कोड को संपादित करना और इसे स्वयं आज़माना भी
आसान बनाता है।
Inline Styles
अगर किसी तत्व की
एक एकल घटना के लिए एक अनूठी शैली लागू की जानी है, तो नी शैली का उपयोग किया जा सकता है। इनलाइन शैलियों
का उपयोग करने के लिए, संबंधित टैग में शैली विशेषता का उपयोग करें।
शैली विशेषता में कोई भी CSS
गुण हो सकते हैं। नीचे
दिए गए उदाहरण से पता चलता है कि टेक्स्ट के रंग और पैराग्राफ के बाएं हिस्से को
कैसे बदलना है:
<p
style="color:blue;margin-left:20px;">This is a paragraph.</p>
HTML Style Example - Background Color
|
<!DOCTYPE
html>
<html>
<body
style="background-color:yellow;">
<h2 style="background-color:red;">This
is a heading</h2>
<p
style="background-color:green;">This is a paragraph.</p>
</body>
</html>
|
HTML Style Example - Font, Color and Size
|
<!DOCTYPE
html>
<html>
<body>
<h1 style="font-family:verdana;">A
heading</h1>
<p
style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
|
HTML Style Example - Text Alignment
|
<!DOCTYPE
html>
<html>
<body>
<h1
style="text-align:center;">Center-aligned heading</h1>
<p>This
is a paragraph.</p>
</body>
</html>
|
Internal Style Sheet
आंतरिक शैली की
शीट का उपयोग किया जा सकता है यदि एक एकल दस्तावेज़ में एक अनूठी शैली है। आंतरिक
शैलियों को इस तरह से <style> टैग का उपयोग करके HTML पृष्ठ के <head> अनुभाग में
परिभाषित किया जाता है:
<head>
<style
type="text/css">
body
{background-color:yellow;}
p
{color:blue;}
</style>
</head>
External Style Sheet
बाहरी शैली की
शीट आदर्श होती है जब शैली को कई पृष्ठों पर लागू किया जाता है। बाहरी स्टाइल शीट
के साथ, आप एक फ़ाइल को
बदलकर संपूर्ण वेब साइट का रूप बदल सकते हैं। प्रत्येक पृष्ठ को <link> टैग का उपयोग करके स्टाइल शीट से लिंक करना होगा। <link> टैग <head> अनुभाग के अंदर
जाता है:
|
<head>
<link
rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
|
No comments:
Post a Comment
Please Do Not Enter Any Spam Link in the comment Box.