Wednesday, July 17, 2019

HTML Text Formatting part-013

HTML Text Formatting

Text Formatting

This text is bold
This text is italic
This is subscript and superscript

HTML Formatting Elements

In the previous chapter, you learned about the HTML style attribute.
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:
  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Small text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

Example

<b>This text is bold</b>
The HTML <strong> element defines strong text, with added semantic "strong" importance.

Example

<strong>This text is strong</strong>

HTML <i> and <em> Elements

The HTML <i> element defines italic text, without any extra importance.

Example

<i>This text is italic</i>
The HTML <em> element defines emphasized text, with added semantic importance.

Example

<em>This text is emphasized</em>
Note: Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is "important".

HTML <small> Element

The HTML <small> element defines smaller text:

Example

<h2>HTML <small>Small</small> Formatting</h2>

HTML <mark> Element

The HTML <mark> element defines marked/highlighted text:

Example

<h2>HTML <mark>Marked</mark> Formatting</h2>

HTML <del> Element

The HTML <del> element defines deleted/removed text.

Example

<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element

The HTML <ins> element defines inserted/added text.

Example

<p>My favorite <ins>color</ins> is red.</p>

HTML <sub> Element

The HTML <sub> element defines subscripted text.

Example

<p>This is <sub>subscripted</sub> text.</p>

HTML <sup> Element

The HTML <sup> element defines superscripted text.

Example

<p>This is <sup>superscripted</sup> text.</p>

HTML Exercises

Test Yourself With Exercises

Exercise:

Add extra importance to the word "degradation" in the paragraph below.
<p>
WWF's mission is to stop the degradation of our planet's natural environment.
</p>

Start the Exercise

HTML Text Formatting Elements

Tag Description
<b> Defines bold text
<em> Defines emphasized text 
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
For a complete list of all available HTML tags, visit our HTML Tag Reference
- No comments:

Tuesday, July 2, 2019

HTML Styles - CSS part -012

एचटीएमएल शैलियाँ - सीएसएस

सीएसएस = शैलियाँ और रंग

पाठ में हेरफेर
रंग,  बक्से

सीएसएस के साथ HTML स्टाइल

सीएसएस के लिए खड़ा है सी ascading एस tyle एस heets।
सीएसएस का वर्णन HTML तत्वों को कैसे स्क्रीन, कागज, या अन्य मीडिया में पर प्रदर्शित हो रहे हैं ।
सीएसएस बहुत काम की बचत होती है । यह कई वेब पृष्ठों के लेआउट सभी को एक बार नियंत्रित कर सकते हैं।
सीएसएस 3 तरीकों से HTML तत्वों को जोड़ा जा सकता है:
  • इनलाइन - HTML तत्वों में शैली विशेषता का उपयोग करके
  • आंतरिक - एक का उपयोग करके <style>में तत्व <head>अनुभाग
  • बाहरी - बाह्य CSS फ़ाइल का उपयोग करके
सबसे आम तरीका सीएसएस जोड़ने के लिए, अलग सीएसएस फ़ाइलों में शैलियों रखने के लिए है। हालांकि, यहां हम, इनलाइन और आंतरिक स्टाइल का प्रयोग करेंगे क्योंकि इस में आप इसे अपने आप को प्रयास करने के लिए के लिए प्रदर्शित करने के लिए आसान है, और आसान है।
सुझाव: आप हमारे में सीएसएस के बारे में भी बहुत कुछ सीख सकते हैं सीएसएस ट्यूटोरियल ।

इनलाइन सीएसएस

एक इनलाइन सीएसएस एक HTML तत्व के लिए एक अनूठी शैली लागू करने के लिए प्रयोग किया जाता है।
एक इनलाइन सीएसएस किसी HTML तत्व की शैली विशेषता का उपयोग करता है।
इस उदाहरण सेट के पाठ का रंग <h1>नीले रंग के तत्व:

उदाहरण

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

आंतरिक सीएसएस

एक अंदरूनी सीएसएस एक HTML पृष्ठ के लिए एक शैली को परिभाषित करने के लिए किया जाता है।
एक अंदरूनी सीएसएस में परिभाषित किया गया है <head>, एक HTML पृष्ठ की धारा एक के भीतर <style>तत्व:

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

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

</body>
</html>

बाहरी सीएसएस

किसी बाह्य शैली पत्रक कई HTML पृष्ठों के लिए शैली को परिभाषित करने के लिए किया जाता है।
किसी बाह्य शैली पत्रक के साथ, आप एक पूरे वेब साइट के देखो, एक फ़ाइल को बदलने के द्वारा बदल सकते हैं!
किसी बाह्य शैली पत्रक का उपयोग करने के लिए, में इसे करने के लिए एक लिंक जोड़ने <head>HTML पृष्ठ के अनुभाग:

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

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

</body>
</html>
किसी बाह्य शैली पत्रक किसी पाठ संपादक में लिखा जा सकता है। फ़ाइल किसी भी एचटीएमएल कोड शामिल नहीं करना चाहिए, और एक .css विस्तार के साथ सहेजा जाना चाहिए।
यहां "styles.css" लग रहा है:
body {
  background-color: powderblue;}
h1 {
  color: blue;}
p {
  color: red;}

सीएसएस फ़ॉन्ट्स

सीएसएस colorसंपत्ति पाठ रंग प्रयोग की जाने वाली परिभाषित करता है।
सीएसएस font-familyसंपत्ति का इस्तेमाल किया जाने वाला फ़ॉन्ट परिभाषित करता है।
सीएसएस font-size संपत्ति पाठ का आकार प्रयोग की जाने वाली परिभाषित करता है।

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;}</style>
</head>
<body>

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

</body>
</html>

सीएसएस सीमा

सीएसएस borderसंपत्ति किसी HTML तत्व के चारों ओर एक सीमा को परिभाषित करता है:

उदाहरण

p {
  border: 1px solid powderblue;}

सीएसएस पैडिंग

सीएसएस paddingसंपत्ति पाठ और सीमा के बीच एक गद्दी (स्थान) को परिभाषित करता है:

उदाहरण

p {
  border: 1px solid powderblue;
  padding: 30px;}

सीएसएस मार्जिन

सीएसएस marginसंपत्ति सीमा के बाहर एक मार्जिन (स्थान) को परिभाषित करता है:

उदाहरण

p {
  border: 1px solid powderblue;
  margin: 50px;
}

आईडी गुण

एक विशेष तत्व के लिए एक विशिष्ट शैली को परिभाषित करने के लिए, एक जोड़ने के idतत्व को विशेषता:
<p id="p01">I am different</p>
फिर विशिष्ट आईडी के साथ तत्व के लिए एक शैली को परिभाषित:

उदाहरण

#p01 {
  color: blue;}
ध्यान दें: एक तत्व की आईडी, एक पृष्ठ के भीतर अद्वितीय होना चाहिए ताकि आईडी चयनकर्ता एक अद्वितीय तत्व का चयन करने के लिए इस्तेमाल किया जाता है!

वर्ग विशेषता

तत्वों को विशिष्ट प्रकार के लिए एक शैली को परिभाषित करने के लिए, एक जोड़ने के classतत्व को विशेषता:
<p class="error">I am different</p>
फिर वह विशिष्ट वर्ग के साथ तत्वों के लिए एक शैली को परिभाषित:

उदाहरण

p.error {
  color: red;}

बाहरी संदर्भ

बाहरी स्टाइल शीट एक पूर्ण यूआरएल के साथ या वर्तमान वेब पेज के लिए एक रास्ता रिश्तेदार के साथ संदर्भित किया जा सकता।
यह उदाहरण एक शैली पत्रक से जोड़ने के लिए एक पूर्ण URL उपयोग करता है:

उदाहरण

<link rel="stylesheet" href="https://teachincal web/html/styles.css">
यह उदाहरण एक शैली वर्तमान वेब साइट पर एचटीएमएल फ़ोल्डर में स्थित चादर के लिए लिंक:

उदाहरण

<link rel="stylesheet" href="/html/styles.css">
यह उदाहरण एक शैली वर्तमान पृष्ठ को उसी फ़ोल्डर में स्थित चादर के लिए लिंक:

उदाहरण

<link rel="stylesheet" href="styles.css">
आप अध्याय में फ़ाइल पथ के बारे में अधिक पढ़ सकते हैं HTML फ़ाइल पथ ।

अध्याय का सारांश

  • HTML का उपयोग styleइनलाइन स्टाइल के लिए विशेषता
  • HTML का उपयोग <style>आंतरिक सीएसएस परिभाषित करने के लिए तत्व
  • HTML का उपयोग करें <link>बाह्य CSS फ़ाइल का उल्लेख करने के तत्व
  • HTML का उपयोग करें <head><style> और <link> तत्व स्टोर करने के लिए तत्व
  • सीएसएस का उपयोग करें colorपाठ रंग के लिए संपत्ति
  • सीएसएस का उपयोग करें font-familyपाठ फोंट के लिए संपत्ति
  • सीएसएस का उपयोग करें font-sizeपाठ आकार के लिए संपत्ति
  • सीएसएस का उपयोग borderसीमाओं के लिए संपत्ति
  • सीएसएस का उपयोग paddingसीमा के अंदर अंतरिक्ष के लिए संपत्ति
  • सीएसएस का उपयोग marginसीमा के बाहर अंतरिक्ष के लिए संपत्ति

एचटीएमएल व्यायाम

टेस्ट अपने आप को व्यायाम के साथ

व्यायाम:

पीले करने के लिए दस्तावेज़ (शरीर) की पृष्ठभूमि का रंग सेट करने के लिए सीएसएस का उपयोग करें।
<! DOCTYPE html>
<html>
<head>
<style>

  :पीला;
</ style>
</ head>
<body>

<h1> मेरे मुख पृष्ठ </ h1>

</ body>
</ html>

व्यायाम शुरू

एचटीएमएल शैली टैग

Tag Description
<style> Defines style information for an HTML document
<link> Defines a link between a document and an external resource
सभी उपलब्ध HTML टैग की एक पूरी सूची के लिए, हमारी यात्रा के HTML टैग संदर्भ ।

- 2 comments:
Subscribe to: Posts (Atom)

Featured Post

html part-02

                      HTML Editors                        html part -02                                  लिखें एचटीएमएल Notepad ...

  • HTML Styles - CSS part -012
    एचटीएमएल शैलियाँ - सीएसएस सीएसएस = शैलियाँ और रंग पाठ में हेरफेर रंग,  बक्से सीएसएस के साथ HTML स्टाइल सीएसएस के लि...
  • website billed course stup by stup {html part -01]
                                                            HTML              एचटीएमएल क्या है? HTML वेब पेज निर्माण के ल...
  • HTML Text Formatting PART -08
    एचटीएमएल पाठ स्वरूपण पाठ स्वरूपण This text is bold This text is italic This is subscript and superscript एचटीएमएल प्...