BTemplates.com

HTML: Lecture 7: Font সংক্রামত্ম এলিমেন্ট (Tag)

  September 07, 2019    Tasnuv Bin Manjur (Shanon)
Font সংক্রামত্ম এলিমেন্ট (ট্যাগ)
Text Formatting Tag
টেক্সটের আকৃতি, স্টাইল ইত্যাদি বিভিন্ন ভাবে উপস্থাপন করা যায়। এতে ডকোমেন্টের চেহারাও আকর্ষনীয় হয়। একে পৃথক পৃথক বিভিন্ন ধরনের ট্যাগ ব্যবহার করা হয়। এই ট্যাগগুলি Container টাইপের ট্যাগ।
Bold Face Element
কোন বিশেষ অংশকে Bold বা গাঢ় করার জন্য এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচ্ছে -
                   <b>.........................................................</b>

উদাহরন স্বরুপ কোড হচ্ছে নিন্মরুপ:
ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।
Italics Element
কোন বিশেষ অংশকে Italic বা সামান্য বাঁকানো ভাবে উপস্থাপন করার জন্য এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচ্ছে -
                        <i>......................................</i>
আপাতত আমরা Head ও Title নামের কোডিংগুলি দেখবো না, শুধুমাত্র Body ট্যাগের পরিবর্তন দেখছি।
উদাহরন স্বরুপ কোড হচ্ছে নিমণরূপ:
<html>
<body>
 This is normal.<i> This is ITALICS.</i>
</body>
</html>
Strong Element
এটি অনেকটা বোল্ড এর মত এলিমেন্ট কোন বিশেষ অংশ আরও গাঢ় করার জন্য Strong কমান্ড ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচ্ছে-
          <strong>......................................</strong>
উদাহরন স্বরম্নপ কোড হচ্ছে নিমণরূপ:
আপাতত আমরা Head ও Title নামের কোডিংগুলি দেখবো না, শুধুমাত্র Body ট্যাগের পরিবর্তন দেখছি।
<html>
<body>
 This is normal. <strong> This is STRONG.</strong>
</body>
</html>
big element (HTML5 এটি সাপোর্ট করে  না)
টেক্সেটের বিশেষ অংশকে নরমাল সাইজের তুলনায় বড় করে উপস্থাপন করার জন্য এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচ্ছে - 
         <big>...................................................</big>
উদাহরন স্বরুপ কোড হচ্ছে নিমণরূপ:
<html>
<body>
this is normal.<big> This is BIG.</big>
</body>
</html>
Small Element
টেক্সটের বিশেষ অংশেকে নরমাল সাইজের তুলনায় ছোট করে উপস্থাপন করার জন্য এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচ্ছে :
          <small>.............................................</ small>
উদাহরন স্বরুপ কোড হচ্ছে নিমণরূপ:
<html>
<body>
 this is normal.<small> I am SMALL.</small>
</body>
</html>
Subscript Element
টেক্সটের কোন অংশকে মূল লাইনের একঘর নিচে স্থাপনের জন্য এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচেছ:
           <sub>...............................................</sub>
উদাহরণ স্বরূপ কোড হচ্ছে নিমণরূপ:
<html>
this is normal h2o. this is subscript. h<sub>2</sub>o
</body>
</html>
Superscript Element
টেক্সটের কোন অংশকে মূল লাইনের একঘর উপরে স্থাপনের জন্য এই ট্যাগ ব্যবহার করা হয়। যেমন A2, B2, 510 ইত্যাদি লেখার জন্য এই ট্যাগের ফরম্যাট হচেছ:
          <super>.........................................</super>
উদাহরণ স্বরূপ কোড হচ্ছে নিমণরূপ:
<html>
<body>
this is normal. a2+b2. this is superscript a<sup>2</sup>+b<sup>2</sup>
</body>
</html>
Emphasis Element
টেক্সেটের বিশেষ অংশে একটু ইটালিক এবং একটু গাঢ় ইফেক্ট দেওয়ার জন্য এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচ্ছে
                <em>.............................................</em>
উদাহরন স্বরুপ কোড হচ্ছে নিমণরূপ:
<html>
<body>
 This is NORMAL.<em> This is EMPHASIS.</em>
</body>
</html>
Delete Element
টেক্সটের কোন বিশেষ অংশ লিখে কেটে দেওয়ার ইফেক্ট অর্থাৎ ফন্টের মাঝ বরাবর দাগ থাকা অবস্থার ইফেক্ট আনার জন্য  এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচ্ছে :
        <del>.........................................................</del>
উদাহরন স্বরুপ কোড হচ্ছে নিমণরূপ:
<html>
<body>
 This is normal.<del> This is STRIKE THROUGH.</del>
</body>
</html>
Insert Element
কোন বিশেষ অংশকে আন্ডারলাইন করা বা লেখার নিচে দাগ দেওয়ার  জন্য এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচ্ছে
        <ins>.......................................................</ins>
উদাহরন স্বরুপ কোড হচ্ছে নিমণরূপ:
<html>
<body>
 This is normal.<ins> This is underlined.</ins>
</body>
</html>

Underline Element
কোন বিশেষ অংশকে আন্ডারলাইন করা বা লেখার নিচে দাগ দেওয়ার  জন্য এই ট্যাগ ব্যবহার করা হতো। এই ট্যাগের ফরম্যাট ছিল  <u>..................</u>. এটির বদলে এখন CSS এ Style হিসাবে {text-decoration:underline;} ব্যবহার করা হয়। পরে এ বিষয়ে বিসাত্মরিত আলোচনা করা হবে।
এবার আসুন সবগুলি এক সাথে একটি এডিটরে কোড লিখুন। এখন থেকে আমরা Notepad বা Notepad+- ব্যবহার করবো এবং Browser হিসাবে Mozilla Fire Fox বা IE ব্যবহার করবো। তবে পরবর্তীতে অন্যান্য Editor এবং Browser নিয়ে আলোচনা করবো। উল্লেখ্য এখানে প্রতিটি লাইনের শেষ < br /> ট্যাগ ব্যবহারা করা হয়েছে।
উদাহরন স্বরুপ কোড হচ্ছে নিমণরূপ:
Italics Element
কোন বিশেষ অংশকে Italic বা সামান্য বাঁকানো ভাবে উপস্থাপন করার জন্য এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচ্ছে -
                             <i>......................................</i>
আপাতত আমরা Head ও Title নামের কোডিংগুলি দেখবো না, শুধুমাত্র Body ট্যাগের পরিবর্তন দেখছি।
উদাহরন স্বরুপ কোড হচ্ছে নিমণরূপ:
 This is normal. This is ITALICS.


Strong Element
এটি অনেকটা বোল্ড এর মত এলিমেন্ট কোন বিশেষ অংশ আরও গাঢ় করার জন্য Strong কমান্ড ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচ্ছে-
          ......................................
উদাহরন স্বরম্নপ কোড হচ্ছে নিমণরূপ:
আপাতত আমরা Head ও Title নামের কোডিংগুলি দেখবো না, শুধুমাত্র Body ট্যাগের পরিবর্তন দেখছি।
 This is normal. This is STRONG.


big element (HTML5 এটি সাপোর্ট করে  না)
টেক্সেটের বিশেষ অংশকে নরমাল সাইজের তুলনায় বড় করে উপস্থাপন করার জন্য এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচ্ছে - 
           ...................................................
উদাহরন স্বরুপ কোড হচ্ছে নিমণরূপ:
this is normal. This is BIG.


Small Element
টেক্সটের বিশেষ অংশেকে নরমাল সাইজের তুলনায় ছোট করে উপস্থাপন করার জন্য এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচ্ছে :
            <small>.............................................</ small>
উদাহরন স্বরুপ কোড হচ্ছে নিমণরূপ:
 this is normal. I am SMALL.


Subscript Element
টেক্সটের কোন অংশকে মূল লাইনের একঘর নিচে স্থাপনের জন্য এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচেছ:
           ...............................................
উদাহরণ স্বরূপ কোড হচ্ছে নিমণরূপ:
this is normal h2o. this is subscript. h2o


Superscript Element
টেক্সটের কোন অংশকে মূল লাইনের একঘর উপরে স্থাপনের জন্য এই ট্যাগ ব্যবহার করা হয়। যেমন A2, B2, 510 ইত্যাদি লেখার জন্য এই ট্যাগের ফরম্যাট হচেছ:
          .........................................
উদাহরণ স্বরূপ কোড হচ্ছে নিমণরূপ:
this is normal. a2+b2. this is superscript a2+b2


Emphasis Element
টেক্সেটের বিশেষ অংশে একটু ইটালিক এবং একটু গাঢ় ইফেক্ট দেওয়ার জন্য এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচ্ছে
                   .............................................
উদাহরন স্বরুপ কোড হচ্ছে নিমণরূপ:
 This is NORMAL. This is EMPHASIS.


Delete Element
টেক্সটের কোন বিশেষ অংশ লিখে কেটে দেওয়ার ইফেক্ট অর্থাৎ ফন্টের মাঝ বরাবর দাগ থাকা অবস্থার ইফেক্ট আনার জন্য  এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচ্ছে :
          <del>.........................................................</del>
উদাহরন স্বরুপ কোড হচ্ছে নিমণরূপ:
 This is normal.<del> This is STRIKE THROUGH.</del>


Insert Element
কোন বিশেষ অংশকে আন্ডারলাইন করা বা লেখার নিচে দাগ দেওয়ার  জন্য এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচ্ছে
          <ins>.......................................................</ins>
উদাহরন স্বরুপ কোড হচ্ছে নিমণরূপ:
 This is normal. This is underlined.


Underline Element
কোন বিশেষ অংশকে আন্ডারলাইন করা বা লেখার নিচে দাগ দেওয়ার  জন্য এই ট্যাগ ব্যবহার করা হতো। এই ট্যাগের ফরম্যাট ছিল  <u>..................</u>. এটির বদলে এখন CSS এ Style হিসাবে {text-decoration:underline;} ব্যবহার করা হয়। পরে এ বিষয়ে বিসাত্মরিত আলোচনা করা হবে।
এবার আসুন সবগুলি এক সাথে একটি এডিটরে কোড লিখুন। এখন থেকে আমরা Notepad বা Notepad+- ব্যবহার করবো এবং Browser হিসাবে Mozilla Fire Fox বা IE ব্যবহার করবো। তবে পরবর্তীতে অন্যান্য Editor এবং Browser নিয়ে আলোচনা করবো। উল্লেখ্য এখানে প্রতিটি লাইনের শেষ < br /> ট্যাগ ব্যবহারা করা হয়েছে।
উদাহরন স্বরুপ কোড হচ্ছে নিমণরূপ:
ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।
Font সংক্রামত্ম এলিমেন্ট (ট্যাগ) :
Computer Output Ralated Formatting Tag
কম্পিউটারের মনিটরের আউটপুটের উপর নির্ভর করে বেশ কিছু ট্যাগ ব্যবহার করা হয়। এতেও টেক্সটের আকৃতি, স্টাইল ইত্যাদি বিভিন্ন ভাবে উপস্থাপন করা যায়। এতে ডকোমেন্টের চেহারাও আকর্ষনীয় হয়। একে পৃথক পৃথক বিভিন্ন ধরনের ট্যাগ ব্যবহার করা হয়। এই ট্যাগগুলি Container টাইপের ট্যাগ। এখন এগুলির বিষয়ে জানবো।
টেক্সটের অংশ বিশেষ কে যদি ফিক্সড-উইডথ ফরম্যাট অর্থাৎ প্রোগ্রামিং এর সময় যে স্টাইলে কোড লেখা হয় সেই স্টাইলে লিখতে চাইলে এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচেছ:
            .......................................................</ code>
আপাতত আমরা Head ও Title ট্যাগের কোডিংগুলি দেখবো না, শুধুমাত্র Body ট্যাগের পরিবর্তন দেখছি।
উদাহরণ স্বরূপ কোড হচ্ছে নিমণরূপ:
This is normal. This is code style.


Variables Element
একই ভাবে টেক্সটের অংশ বিশেষকে ভেরিয়েবল স্টাইলে প্রদর্শনের জন্য এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের ফরম্যাট হচেছ: ..........................................................
উদাহরণ স্বরূপ কোড হচ্ছে নিমণরূপ:
This is normal. This is VARIABLE STYLE.


ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।
tt/kbd/samp ELEMENT
TT (HTML5 এটি সাপোর্ট করে  না) ট্যাগ হচ্ছে ফিক্সড-উইডথ ফরমেটের আরেকটি উদাহরণ। এই ট্যাগের দ্বারা টেক্সটকে টাইপ রাইটারের একটি বিশেষ ধরনের ফন্ট (MONOSPACED Font)-এর ইফেক্ট দেওয়া যায়। এই ট্যাগের ফরম্যাট হচেছ: .................... kbd ট্যাগের দ্বারা টেক্সটকে কম্পিউটার কীবোর্ডের বিশেষ ধরনের ফন্ট-এর ইফেক্ট দেওয়া যায়। এই ট্যাগের ফরম্যাট হচেছ: ....................  samp  ট্যাগের দ্বারা টেক্সটকে স্যাম্পল কম্পিউটার কোডের  ফন্টইফেক্ট দেওয়া যায়। এই ট্যাগের ফরম্যাট হচেছ: ....................
উদাহরণ স্বরূপ কোড হচ্ছে নিমণরূপ:
This is normal.This is typewriter style.
This is normal.This is computer keyboard style.
This is normal. This is computer sample code.


ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।
Pre Element
এই ট্যাগের সুবিধা হচ্ছে দীর্ঘ বাক্যের ক্ষেত্রে, টেক্সট এডিটরে যেখানে Enter দিয়ে প্যারা শুরু করবেন অথবা যেখানে যেভাবে ট্যাব ব্যবহার করবেন ব্রাউজারও ঠিক সেই ভাবেই প্রদর্শন করবে। এক্ষেত্রে ব্রাউজার ছোট/বড় করলেও টেক্সটের ফরম্যাটের কোন পরিবর্তন হবে না। কোন
বা ট্যাগের দরকার হয় না।  ব্রাউজার এক্ষেত্রে Monospaced Font ব্যবহার করে। এই ট্যাগের ফরম্যাট হচ্ছে:                                                                     
  
............................
উদাহরণ স্বরূপ কোড হচ্ছে নিমণরূপ:
  Position & Salary of Nova staffs

  Name      Title     Salary
     Bappi     Director  20000
     Meben     Officer   12000
     Sopono    Faculty   10000    


ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।