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
ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
Book Name: Mastering Microsoft Word
Published By: Gyankosh Prokashani
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
The
writer of this book has told that he has written this book with the
concept of "teach yourself". On the other hand, Web Design is a thing which is
interesting to learn. He has also told that the book is full of fan and
enjoyment so that a person can learn Web Design by himself by playing with
the example projects of this book. Book's CD Link below...
RELATED POST LINKS BELOW ********************************************
