Skip to main content

HTML Text Formatting

Image
By SARVESH SHARMA

Introduction to HTML Text Formatting 

HTML में कुछ tags सिर्फ text formatting के लिए provide किये गए है। इन tags का इस्तेमाल करते हुए आप web page पर text की presentation और position को control कर सकते है। जैसे की आप text को bold या underline कर सकते है।
किसी text editor में आप ये काम एक button click से कर सकते है लेकिन HTML में इसके लिए आप tags यूज़ करते है। कुछ common formatting type है जो आप text पर apply करते है इनकी list नीचे दी जा रही है।
  1. Bold
  2. Italic
  3. Underline
  4. Marked
  5. Superscript 
  6. Subscript
  7. Small
  8. Deleted

HTML <b> Tag   

HTML के द्वारा किसी text को bold करने के लिए <b> tag यूज़ किया जाता है। इसके लिए आप starting और ending tags के beech में text को लिखते है।
<b> This text will be bolded. </b>

HTML <i> Tag  

HTML से text को italic बनाने के लिए <i> tag यूज़ किया जाता है।
<i> This text will be italic. </i>

HTML <ins> Tag 

किसी text को underline करने के लिए <ins> tag यूज़ किया जाता है। 
<ins> This text will be underlined</ins>

HTML <mark> Tag

यदि आप किसी text को highlight करना चाहते है तो उसके लिए <mark> tag यूज़ कर सकते है।  
<mark> This text will be highlighted </mark>

HTML <sup> Tag

Text को superscript करने के लिए आप <sup> tag यूज़ कर सकते है।
<p> This is normal text<sup> This will be super scripted </sup> This is normal again </p>

HTML <sub> Tag 

अगर आप text को subscript में लाना चाहते है तो उसके लिए आप <sub> tag यूज़ करेंगे।   
<p> This is normal text <sub> This text will be sub scripted </sub></p>

HTML <small> Tag

यदि आप किसी text को दूसरे text से छोटा रखना चाहते है तो इसके लिए आप <small> tag  यूज़ कर सकते है। कई editors ऐसा text को highlight करने के लिए भी करते है। 
<p> Normal Text <small> Smal Text </small> </p>

HTML <del> Tag

किसी text को deleted शो करने के लिए आप <del> tag का इस्तेमाल कर सकते है। जब किसी tag को deleted show करते है तो उस text के through line show होती है। 
<p> <del> This text will be deleted</del></p>

Example

<!DOCTYPE html>
<html> 

<head> 
<title>Text Formatting</title> 
</head> 

<body> 

<p><b>This text will be bolded.</b> </p> 
<p><i>This text will be italic.</i></p> 
<p><ins> This text will be underlined</ins></p> 
<p><mark> This text will be highlighted</mark></p> 
 
<p>This is normal text
<sup>This will be super scripted</sup>
This is normal again</p>

<p>This is normal text
<sub> This text will be subscripted </sub></p> 
<p>Normal Text <small> Smal Text </small></p> 
<p><del> This text will be deleted</del></p> 
  
</body>

</html>
ऊपर दी गयी script को run करने पर web page इस प्रकार show होगा।
HTML-text-formatting-tags-example-output

Styling HTML Text 

Text को style करने के लिए जैसे की उसका color change करना या font family change करना आदि के लिए CSS को यूज़ किया जाता है। CSS एक बड़ा topic है। CSS के बारे में और अधिक जानकारी आप CSS in Hindi tutorial से प्राप्त कर सकते है। 
यँहा पर सिर्फ आपकी समझ के लिए कुछ styles का इस्तेमाल बताया जा रहा है। इसके लिए आप Style tag यूज़ करते है। और एक CSS property और उसकी values देते है।

Changing Text Color 

किसी भी tag के text का color change करने के लिए आप CSS की color property यूज़ करते है। और इसके बाद colon लगाकर color का नाम देते है। 
<p style="color:red">This text will be red. </p>

Changing Font Family 

Text की font family change करने के लिए आप font family property यूज़ करते है और value के रूप में font family का नाम देते है।
<p style="font-family:Arial"> This text will be in Arial </p>

Changing Text Size 

Text की size change करने के लिए आप font size property यूज़ करते है और value के रूप में जो size आप चाहते है वह देते है।
<p style="font-size: 45"> This size is changed by style tag. </p>

Changing Text Position 

Text की position change करने के लिए text align property यूज़ की जाती है और value के रूप में आप left, right या center pass कर सकते है।
<p style="text-align:center"> This position is change by style tag</p>

Example

<!DOCTYPE html>
<html> 

<head>
<title>Text Formatting</title> 
</head> 

<body> 

<p style="color:red">This text will be red. </p> 
 
<p style="font-family:Arial"> This text will be in Arial </p>

<p style="font-size: 45"> This size is changed by style tag. </p>
 
<p style="text-align:center">

This position is changed by style tag.</p> 
 
</body> 
</html>
ऊपर दी गयी script निचे दिया गया web page generate करेगी।  
HTML-text-position-example-output

Comments

Post a Comment

Popular posts from this blog

कम्प्यूटर की पीढियाँ (Generation of Computer in Hindi)

By SARVESH SHARMA
कम्प्यूटर की पीढियाँ (Generation of Computer in Hindi) कंप्यूटर का विकास 16 वीं शताब्दी से शुरू हो गया था तथा आज का आधुनिक कंप्यूटर्स इसका परिणाम है। हालांकि, कंप्यूटर के विकास में तेज़ी से बदलाव आया। प्रत्येक पीढ़ी के बाद, कंप्यूटर के आकार-प्रकार, कार्यप्रणाली और कार्यशीलता में बहुत सुधार हुआ है। वर्तमान के कंप्यूटर काफी आधुनिक और विकशित है। इस क्रम-विकास की अवधि के दौरान, कंप्यूटर में काफी परिवर्तन आये जिसने कंप्यूटरों की नई पीढीयों को जन्म तथा विभिन्न प्रकार की कंप्यूटर का आविष्कार हुआ। जिससे हम  जनरेशन ऑफ कंप्यूटर   (Generation of Computer in Hindi)  के रूप में जानते है तथा इसे पांच अलग चरणों में विभाजित किया गया है। पहली पीढ़ी के कंप्यूटर (1940 – 1956) दूसरी पीढ़ी के कंप्यूटर (1956 – 1963) तीसरी पीढ़ी के कंप्यूटर (1964 – 1971) चौथी पीढ़ी के कंप्यूटर (1971 – 1980) पांचवीं पीढ़ी के कंप्यूटर (वर्तमान और भविष्य) फर्स्ट जनरेशन ऑफ कंप्यूटर (1940 – 1956) पहले पीढ़ी के कंप्यूटरों में  वैक्यूम ट्यूब  का इस्तेमाल किया गया था। वैक्यूम ट्यूब एक नाजुक कांच का यंत्र था, जो फिलाम
1 comment
Read more

कंप्यूटर कि-बोर्ड के कुछ अनोखे शॉर्टकट्स

By SARVESH SHARMA
      👇 कंप्यूटर कि-बोर्ड के कुछ अनोखे शॉर्टकट्स 👇  हैल्लो दोस्तों मैं सर्वेश शर्मा , आज हम जानेंगे कुछ कंप्यूटर शॉर्टकट्स के बारे में तो जितने ज्यादा शॉर्टकट आपके दिमाग में रहते हैं, आप उतनी ही तेज़ी से कंप्यूटर पर काम कर सकते हैं। तो आप सुनिश्चित करें कि अधिकतम शॉर्टकट आपको पता हों। यहाँ हम कुछ ऐसे ही शॉर्टकट की बात करेंगे जिनके इस्तेमाल से आप काफी हद तक अपना समय बचा सकते हैं, सामान्य शॉर्टकट: किसी भी फाइल या फोल्डर को बिना रीसायकल बिन में पहुंचाए डिलीट करें (परमानेंट डिलीट करें): शॉर्टकट:  Shift + Delete किसी विंडो, डेस्कटॉप या डॉक्यूमेंट के सभी आइटम सेलेक्ट करें: शॉर्टकट:  Ctrl + A ( संपूर्ण टेक्स्ट सेलेक्ट करने के लिए ) शॉर्टकट:  Alt + Enter खुली विंडोज़(या एप्लीकेशन) को आपस में स्विच करे । शॉर्टकट:  Alt + Tab खुली हुई विंडोज (या एप्लीकेशन) को आपस में स्विच करें (विंडोज फ्लिप एरो द्वारा): शॉर्टकट:  Windows logo key + Tab वर्तमान विंडो से पहले जो विंडो आपने खोली थी उसपर जाएँ: शॉर्टकट:  Alt + Esc 'टास्क मेनेजर' को ओपन करें: शॉर्टकट:
Post a Comment
Read more

10 सिक्रेट कंप्यूटर टिप्स् एंड ट्रिक्स: नहीं जानेंगे तो नहीं बन पाएंगे पॉवर यूजर

By SARVESH SHARMA
10 सिक्रेट कंप्यूटर टिप्स् एंड ट्रिक्स: नहीं जानेंगे तो नहीं बन पाएंगे पॉवर यूजर ||SHARMA COMPUTE GYAN Hindi Computer Tips: कई कट्टर कंप्यूटर यूजर्स को लग सकता हैं की, उन्‍हे अब नई ट्रिक सीखने की जरूरत नहीं हैं, लेकिन कंप्‍यूटर में हमेशा सीखने के लिए नई चीजें होती हैं जो आपके स्‍कील को बेहतर बनाने में मदद करती हैं। मेरी शर्त हैं इस आर्टिकलमें आपको कम से कम एक उपयोगी ट्रिक मिलेगी, जिसे आप पहले नहीं जानते थे। मेरा अंतिम लक्ष्य है की आप अपने वर्कफ़्लो से हर एक मूल्यवान सेकंड सेव करने के लिए अधिक प्रॉडक्टिव बनें। ये छोटे, लेकिन अभी तक अव्यक्त विंडोज टिप्स और ट्रिक्स आपके वर्कफ़्लो में बहुत बड़ा अंतर कर सकते हैं- और प्रोसेस में आपका बहुत समय बचा सकते हैं। बेशक, आप हमेशा इन Computer Tips Tricks Hindi को फ्रेंडस् और फैमेली मेंबर्स के साथ शेयर कर सकते हैं ताकि वे भी बेहतर पीसी यूजर्स बन सके। Computer Tips Tricks Hindi: PC Tips and Tricks in Hindi: Computer Tricks and Secrets in Hindi: 1) Problem Steps Recorder : Problem Steps Recorder का उपयोग करें यह आसान टूल ऑटो
Post a Comment
Read more