ওয়েব ডিজাইন-৪:লেখার আকার-আকৃতি পরিবর্তন


আগের পোস্টে আমরা দেখেছি কেমন করে ওয়েব পেজে লেখা সাজাতে হয়। এই পোস্টে আমরা দেখবো কেমন করে ফন্ট পরিবর্তন, আকার আকৃতি পরিবর্তন করতে হয়।

১। বোল্ড, ইটালিক, আন্ডারলাইনঃ কোন লেখাকে বোল্ড(মোটা) , ইটালিক(কিছুটা হেলানো) বা আন্ডারলাইন(নিচে টান) করতে যথাক্রমে <b> , <i> ও <u> ট্যাগ ব্যবহার করা হয়। (মনে রাখার জন্যঃ বোল্ড(bold)এর প্রথম অক্ষর b,ইটালিক (Italic) এর প্রথম অক্ষর i,এবং আন্ডারলাইনের( underline) প্রথম অক্ষর u)। এই ট্যাগগুলো এবং এদের সমাপ্তিসূচক ট্যাগের মাঝে যা লিখবেন , তা-ই বোল্ড, ইটালিক বা আন্ডারলাইন হবে। যেমনঃ

<b>MUKTADIR</b>  <br/>
<i>MUKTADIR</i>  <br/>
<u>MUKTADIR</u> <br/>

ওয়েব পেজে নিচের ন্যায় দেখাবেঃ

MUKTADIR

MUKTADIR

MUKTADIR

যদি একই লেখাকে একসাথে বোল্ড,ইটালিক বা আন্ডারলাইন করতে চান তবে একাধিক ট্যাগ একসাথে ব্যবহার করতে পারবেন। যেমনঃ
<b><i>MUKTADIR</i></b> <br/>
<b><u>MUKTADIR</u></b> <br/>
<i><u>MUKTADIR</u></i> <br/>
<i><b><u>MUKTADIR</u></b></i> <br/>

ওয়েব পেজে নিচের ন্যায় দেখাবেঃ

MUKTADIR

MUKTADIR

MUKTADIR

MUKTADIR

  1. হেডিংঃ সংবাদ পত্রের শিরোনামের সাথে আমরা সবাই পরিচিত। অনেক ওয়েব সাইটেও দেখবেন এরকম শিরোনাম(Headline) থাকে। আপনিও ওয়েব পেজে শিরোনাম দিতে পারেন। এজন্য <h1>, <h2>, <h3> ,<h4>, <h5>ও <h6> এই ছয়টি ট্যাগ ব্যবহার করতে পারবেন। কোনটির ক্ষেত্রে শিরোনামটা কেমন হবে তা বলার চেয়ে দেখে বোঝা সহজ। যথাঃ

<h1>MUKTADIR RAHMAN</h1> <br/>
<h2>MUKTADIR RAHMAN</h2> <br/>
<h3>MUKTADIR RAHMAN</h3> <br/>
<h4>MUKTADIR RAHMAN</h4> <br/>
<h5>MUKTADIR RAHMAN</h5> <br/>
<h6>MUKTADIR RAHMAN</h6> <br/>

ওয়েব পেজে নিচের ন্যায় দেখাবেঃ

MUKTADIR RAHMAN

MUKTADIR RAHMAN

MUKTADIR RAHMAN

MUKTADIR RAHMAN

MUKTADIR RAHMAN
MUKTADIR RAHMAN

কেন দিয়েছি বুঝতে পারছেন তো?

৩। সুপারস্ক্রিপ্ট ও সাবস্ক্রিপ্টঃ কোন লেখা স্বাভাবিক অবস্থান থেকে সামান্য উপরে থাকলে তাকে বলে সুপারস্ক্রিপ্ট আর সামান্য নিচে থাকলে তাকে বলে সাবস্ক্রিপ্ট ।য়েব পেজে অংক জাতীয় কোন লেখা লিখতে এবং রাসায়নিক সংকেত লিখতে এদের খুব প্রয়োজন হয়। সুপারস্ক্রিপ্ট(superscript) ও সাবস্ক্রিপ্ট (subscript) লিখার জন্য যথাক্রমে <sup> ও <sub> ট্যাগ দুটি ব্যবহার করা হয়। যেমনঃ

(a+b) <sup> 2 </sup> = a <sup> 2 </sup> +2ab+ b <sup> 2 </sup> <br/>
H<sub>2</sub>O

ওয়েব পেজে নিচের ন্যায় দেখাবেঃ

(a+b) 2 = a 2 +2ab+ b 2

H2O

৪। ফন্ট পরিবর্তনঃ সাধারনভাবে ওয়েব পেজে যখন কোন লেখা লিখেন তখন দেখবেন তা একটি নির্দিষ্ট ফন্টে , নির্দিষ্ট সাইজে আসে যা আগে থেকেই ওয়েব ব্রাউজারে সেট করা থাকে। তবে এই ফন্ট বা সাইজ যদি আপনার মন মত না হয় তবে নিজের ইচ্ছা মত ফন্ট নির্বাচন করতেও পারেন। এজন্য<font> ট্যাগ ব্যবহার করতে হবে। এখন আমরা এইচটিএমএল এর একটা নতুন ধারনার সাথে পরিচিত হতে যাচ্ছি যাকে বলে অ্যাট্রিবিউট (attribute) । তার আগে একটা উদাহারণের মাধ্যমে বিষয়টার সাথে পরিচিত হওয়া যাক। যথাঃ

<font face=”Times New Roman” size=”20″>
Muktadir Rahman
</font>

ওয়েব পেজে নিচের ন্যায় দেখাবেঃ


Muktadir Rahman

কি ঘটছে ভাল করে লক্ষ করুন। Muktadir Rahman লেখটি Times New Roman ফন্টে প্রদর্শিত হচ্ছে যার সাইজ বা আকার হল ২০। এখানে font ট্যাগের দুটি অ্যাট্রিবিউট হল face ও size ।

এবার অ্যাট্রিবিউট নিয়ে কিছু কথা বলি। অ্যাট্রিবিউট শব্দটি দ্বারা ” কোন কিছুর ধর্ম বা বৈশিষ্ট বোঝায়”। এইচটিএমএল এও এটি একই অর্থে ব্যবহৃত হয়। কোন ট্যাগের ধর্ম বা বৈশিষ্ট কেমন হবে তা অ্যাট্রিবিউট এর মাধ্যমে নির্ধারন করা হয়। যেমনঃ উপরের উদাহারণে লেখার ফন্ট কি হবে তা face আট্রিবিউট দিয়ে নির্ধারণ করা হয়েছে, লেখার আকার কেমন হবে তা size অ্যাট্রিবিউট এর মাধ্যমে নির্ধারণ করা হয়েছে। এরকম প্রায় সব গুলো ট্যাগেরই নির্দিষ্ট কতগুলো আট্রিবিউট আছে। এগুলো ব্যবহার করে ঐ ট্যাগ গুলোর স্বাভাবিক ধর্ম পরিবর্তন করা যায়। এখানে স্বাভাবিক কথাটা গুরুত্ত্বপূর্ণ। কারণ আপনি যদি কোন অ্যাট্রিবিউট না লিখেন তবে ওয়েব ব্রাউজার তার নিজের মত করে অ্যাট্রিবিউট সেট করে নেবে। যেমনঃ আগের উদাহারণে size অ্যাট্রিবিউট না লিখলে ওয়েব ব্রাউজার লেখাটি স্বাভাবিক আকৃতিতে প্রদর্শিত করত।
কোন ট্যাগের অ্যাট্রিবিউটকে ঐ ট্যাগের ভেতর লিখতে হবে (উপরের উদাহরণের মত)। অ্যাট্রিবিউট এর গঠন নিম্নদূপঃ

অ্যাট্রিবিউট এর নাম = “অ্যাট্রিবিউট এর মান”

<font> ট্যাগ এর তিনটি অ্যাট্রিবিউট আছে । যথাঃ
1.face:এই অ্যাট্রিবিউট এর মাধ্যমে লেখার ফন্ট কি হবে তা নির্ধারন করা যায়। এখানে মানের অংশে যে ফন্টের নাম লিখবেন তা অবশ্যই যে ওয়েব পেজটি দেখবে তার কম্পিউটার এ ইন্সটল থাকতে হবে। তাই সেই সব ফন্টই ব্যবহার করবেন যা সকল কম্পিউটার এ আছে।
2.size:এই অ্যাট্রিবিউট এর মাধ্যমে লেখার আকার কেমন হবে তা নির্ধারন করা যায়।
3.color:এই অ্যাট্রিবিউট এর মাধ্যমে লেখার রঙ কি হবে তা নির্ধারন করা যায়। এর মান তিন ধরনের হতে পারে। যখন CSS শিখাব তখন এই তিন পদ্ধতি নিয়ে বিস্তারিত আলোচনা করব। এখন প্রচলিত ইংরেজি নাম ( red ; green etc.) ব্যবহার করতে শিখব।

ফন্ট নিয়ে সম্পুর্ন বিষয়টিকে একটা উদাহারণের সাহায্যে ব্যাখ্যা করা হলঃ

<font face=”Arial” size=”30″ color=”red”>
Bangladesh!!!!!
</font>

ওয়েব পেজে নিচের ন্যায় দেখাবেঃ


Bangladesh!!!!!

আজকের মত এখানেই শেষ।

অনুশীলনিঃ ওয়েব পেজে নিচের লেখাটা প্রদর্শণ করাতে হবে কী কোড লিখতে হবে???

Once upon a time,    there was a man and

a woman.

the women was dangerous. 

মতামত-জিজ্ঞাসা

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / পরিবর্তন )

Twitter picture

You are commenting using your Twitter account. Log Out / পরিবর্তন )

Facebook photo

You are commenting using your Facebook account. Log Out / পরিবর্তন )

Google+ photo

You are commenting using your Google+ account. Log Out / পরিবর্তন )

Connecting to %s

%d bloggers like this: