HTML 5 in Tamil - Text: Formatting

கடந்த HTML Tutorial பதிவில் Line Break மற்றும் Horizontal Rules இன் குறிகள் பற்றி பார்த்திருந்தோம். அதன் தொடர்ச்சியாக இந்த பதிவில் HTML இல் காணப்படும்  Formatting பற்றிப் பார்க்கலாம். 

HTML Formatting

Bold-Text

HTML இல் எழுத்துக்களை Bold பண்ண வேண்டும் என்றால் Bold பண்ண வேண்டிய எழுத்துக்களின் முன்னும் பின்னுமாக முறையே  <b>  , </b>  குறியினை இடவேண்டும். 

HTML இனை பொறுத்தமட்டில் Bold ஆனது Text இனை அழகுபடுத்த மாத்திரம் பயன்படும் ஒரு குறியாகும்.

உதாரணமாக:

கீழுள்ளவாறு HTML Editor (Eg. Notepad) இனில் எழுதினால்;

<p><b>Bold</b> only makes<b>text</b> visually <b>bold</b><p> 

அதன் output இனை Browser இல் பார்க்கும் போது பின்வருமாறு காட்சியளிக்கும். 

Bold only makes text visually bold

Strong-Text

HTML இல் ஒரு text இனை முக்கியமானதாக காட்ட இது பயன்படும். 

ஒரு முக்கியமான text  இன் முன்னும் பின்னுமாக  <strong>  , </strong>   குறியீடுகளை எழுதுவதன் மூலம் காட்சிப்படுத்தலாம். 

இதன் output ஆனது Bold போன்றே காட்சி அளிக்கும், இருப்பினும் இக்குறிகள் பாவிக்கப்படும் நோக்கங்கள் வேறு. 

உதாரணமாக:

கீழுள்ளவாறு HTML Editor (Eg. Notepad) இல் எழுதும் போது;

<p><strong>Attention!</strong>Don't visit to unsafe site</p>

அதன் output இனை Browser இல் பார்க்கும் போது கீழ்வருமாறு காட்சியளிக்கும். 

Attention! Don't visit to unsafe site

Italic-Text 

Text இனை italic ஆக காட்டுவதற்கு பயன்படும். 

italic இல் எழுத வேண்டிய எழுத்துக்களின் முன்பாகவும் பின்பாகவும்  முறையே <i>  ,</i> என்ற குறியீடுகளை உபயோகித்து  எழுதப்படும்.

பொதுவாக italic ஆனது நமது சிந்தனைகள் அல்லது கருத்துக்கள், தொழில்நுட்பம் சார்ந்த சொற்பிரயோகங்கள், வேற்று மொழி சொற்தொடர்கள், போன்ற இடங்களில் italic ஆக எழுதுவது வழமை. 

உதாரணமாக:

கீழுள்ளவாறு HTML Editor (Eg. Notepad) இல் எழுதினால்;

<p>A foreign word, <i>Bonjour</i>, means Hello in French</p>

அதன் output இனை Browser இல் பார்க்கும் போது கீழுள்ளவாறு காட்சியளிக்கும். 

A foreign word, Bonjour, means Hello in French

Emphasized-Text

வாசிக்கும் போது சொற்தொடர்களை அழுத்தி வாசிப்பதற்கு Emphasize  Text இனை உபயோகிக்கலாம். 

சொற்களின் முன்னும் பின்னுமாக முறையே <em> , </em> என்ற குறியீடுகளை உபயோகித்து எழுதப்படும். 

இதனுடைய Output, italic போன்றே காட்சியளிக்கும், இருப்பினும் பிரயோகிப்படும் நோக்கம் வேறாக காணப்படும்.

உதாரணமாக:

 

<p>I am <em>really</em> tired</p>

அதன் output இனை Browser இல் பார்க்கும் போது பின்வருமாறு காட்சியளிக்கும். 

I am really tired

Smaller-Text

Text இன் Size இனை சிறிதாக காட்டுவதற்கு  Smaller Text இனை உபயோகிக்கலாம். 

சிறிதாக காட்டவேண்டிய சொற்களின் முன்னும் பின்னுமாக முறையே <small> , </small> என்ற குறியீடுகளை உபயோகித்து எழுதப்படும். 

உதாரணமாக:

கீழ் உள்ளவாறு HTML Editor (Eg. Notepad) இனில் எழுதினால்;

 

<p>This text is <small>"smaller"</small> text</p>




அதன் output இனை Browser இல் பார்க்கும் போது கீழ் உள்ளவாறு காட்சியளிக்கும். 

This text is "smaller" text

Underline-Text

சொற்களின் கீழ் அடிக்கோடிட்டு காட்டுவதற்கு underline-Text இனை உபயோகிக்கலாம்.  

அடிக்கோடு இட வேண்டிய சொல்லின் முன்னும் பின்னுமாக முறையே  <u> , </u> என்ற குறிகளை உபயோகித்து எழுத வேண்டும்.

உதாரணமாக:

கீழ் உள்ளவாறு HTML Editor (Eg. Notepad) இனில் எழுதினால்;




<p>I like <u>The Tamil Techholic</u> website.</p>

அதன் output இனை Browser இல் பார்க்கும் போது பின்வருமாறு காட்சியளிக்கும். 

I like The Tamil Techholic website.

(HTML இல் underline Tags பாவிப்பது குறைவு. அதற்கான காரணம் பற்றி பிறகு பார்க்கலாம்.)

Subscripted-Text

இது தமிழில் கீழ் ஒட்டு/அடியெழுத்து எனப்படும். 

அடியெழுத்தாக வரவேண்டிய எழுத்தின் முன்னும் பின்னுமாக முறையே _, என எழுதப்படும். 

உதாரணமாக:

கீழ் உள்ளவாறு HTML Editor (Eg. Notepad) இனில் எழுதினால்;

 

<p>H<sub>2</sub>O is the chemical formula for water.</p>




அதன் output இனை Browser இல் பார்க்கும் போது பின்வருமாறு காட்சியளிக்கும். 

H₂O is the chemical formula for water.

Superscripted-Text

இது தமிழில் மேல் ஒட்டு எனப்படும். 

மேலொட்டாக வரவேண்டிய எழுத்தின் முன்னும் பின்னுமாக முறையே ^, என எழுதப்படும். 

உதாரணமாக:

கீழுள்ளவாறு HTML Editor (Eg. Notepad) இல் எழுதினால்;

 

<p>(x+y)<sup>2</sup>=x<sup>2</sup>+2xy+y<sup>2</sup></p>

(x+y)²=x²+2xy+y²

Marked (Highlighted)-Text

எழுத்துக்களை highlight பண்ணி காட்டுவதற்கு இது பயன்படும்.  

அடிக்கோடு இட வேண்டிய சொல்லின் முன்னும் பின்னுமாக முறையே <mark> , </mark> என்ற குறிகளை உபயோகித்து எழுதப்படும். 

உதாரணமாக:

கீழ் உள்ளவாறு HTML Editor (Eg. Notepad) இல் எழுதினால்;

 

<p>Don't forget to <mark>Subscribe</mark> Tamil Techholic Youtube Channel</p>

Don't forget to Subscribe Tamil Techholic Youtube Channel

Striked/Deleted-Text

எழுத்துக்களுக்கு குறுக்குக் கோடிட்டு காட்டுவதற்கு இது பயன்படும்.  

குறுக்குக் கோடிட வேண்டிய சொல்லின் முன்னும் பின்னுமாக முறையே <s> , </s> அல்லது <del> , </del>  என்ற குறிகளை உபயோகித்து எழுதப்படும். 

உதாரணமாக:

கீழ் உள்ளவாறு HTML Editor (Eg. Notepad) இனில் எழுதினால்;

 

<p>This Document is updated on <s>2019</s> 2020.</p>

This Document is updated on 2019 2020.

<p>This Document is updated on <del>2019</del> 2020.</p>

This Document is updated on 2019 2020.

Inserted-Text

புதிதாக இணைக்கப்பட்டுள்ள  எழுத்துக்களை காட்டுவதற்கு இது பயன்படும்.  

புதிதாக இணைக்க  வேண்டிய சொல்லின் முன்னும் பின்னுமாக முறையே <ins> , </ins> என்ற குறிகளை பயன்படுத்தி எழுதப்படும். 

இது Underline text போன்றே browser இல் காட்சியளிக்கும், இருப்பினும் பயன்படுத்தப்படும் நோக்கங்கள் வேறாகும்.

உதாரணமாக:

கீழ் உள்ளவாறு HTML Editor (Eg. Notepad) இல் எழுதும் போது;

<p>This Document is updated on <del>2019</del> <ins>2020</ins>.</p>

This Document is updated on 2019 2020.

இன்றைய பதிவில்,

Bold Text	<b>
Strong Text	<strong>
Italic Text	<i>
Emphasized Text	<em>
Smaller Text	<small>
Underlined Text	<u>
Subscripted Text	<sub>
Superscripted Text	<sup>
Marked (/ Highlighted) Text	<mark>
Striked/ Deleted Text	<s> or <del>
Inserted Text	<ins>

மேலுள்ளவற்றை விரிவாக பார்த்திருந்தோம் இதன் தொடர்ச்சியாக  அடுத்த பதிவில் Quotation மற்றும் Citation பற்றிப் பார்க்கலாம்.

தொடரும் ...