ওয়েব ডিজাইন এর হাতেখড়ি
আশা করছি পরম করুণাময় আল্লাহতালার অশেষ রহমতে সকলেই ভালো আছেন। জানিনা আমার লেখা আপনাদের কাছে কেমন লাগছে। আমার এই কার্যক্রম যদি আপনাদের বিন্দু মাত্র উপকারে আসলে আমার এই পরিশ্রম সার্থক হবে।
আজকের পর্ব শুরু করার আগে যে বিষয় এ কিছু কথা বলার প্রয়োজন বোধ করছি তা হলো, প্রত্যেকটি লেখা শুধু পড়লেই যে আপনি উপকৃত হবেন তা কিন্তু নয়। আপনাকে অবশ্যই প্রতিটি লেখা খুবই মনযোগ দিয়ে পড়তে হবে এবং সেগুলোকে ব্যবহারের মাধ্যমে আয়ত্ত করতে হবে। আর প্রত্যেকটি ট্যাগই মুখস্ত থাকতে হবে। আর ট্যাগ গুলো শুধু মুখস্ত করলেই যে সব হয়ে যাবে তা কিন্তু নয়। এগুলো সঠিক ভাবে ব্যবহার করা শিখতে হলে অবশ্যই আপনাকে নিয়মিত ভাবে প্রাকটিস করতে হবে, নাহলে এ বিশাল ট্যাগ ভান্ডার আপনি কখনোই মনে রাখতে সক্ষম হবেন না। তাহলে চলুন আজকের বিষয় বস্তু শুরু করা যাক।
আজকে আমরা মজার কিছু ট্যাগ এর ব্যবহার দেখব। চলুন তাহলে দেখে নেওয়া যাক-
ধরুণ কোন বীজগণিতে সূত্র যেমন- (a+b)2 = a2 + 2ab + b2 লিখতে চাচ্ছেন, ভাবছেন কিভাবে লিখবেন তাই না। নিচের কোডটি ব্যবহার করুন আশা করছি বুঝতে পারবেন আপনাকে কি করতে হবে।
এখন
এই কোডটি কি করতে হবে তা নিশ্চই আগেই সবাই শিখে ফেলেছেন। তবু আজ আবারও
বলছি। কোডটিকে একটি নোট প্যাড এ লিখুন এবং .html এক্সটেনশন দিয়ে সেভ করুন।
এবং সেভ করা ফাইলটিকে ওপেন করুন যা কিনা ব্রাউজারের মাধ্যমে ওপেন হবে। আশা
করছি আপনি আপনার কাঙ্ক্ষিত ফলাফলটি পেয়ে গেছেন।
এবার আসুন নতুন একটি প্রবলেম নিয়ে আলোচনা করি। আচ্ছা যদি কিনা সূত্রটি এমন হত-
(X1 + X2) = X12 + 2X1X2 + X22 অনেক জটিল মনে হচ্ছে তাই না ? আসুন তাহলে এর সমাধানটাও দেখে নেওয়া যাক। নিচের কোডটি ব্যবহার করুন।
আশা
করছি সমাধান হয়ে গেছে। আজ আমরা এখানে
সাবস্ক্রিপ্ট(<sub></sub>) এবং
সুপারস্ক্রিপ্ট(<sup></sup>) দুইটি ট্যাগ এর ব্যবহার
দেখিয়েছি। তবে সকলের কাছে আমার অনুরোধ এই কোডটিকে কপি পেষ্ট করবেন না।
নিজের হাতে টাইপ করে প্র্যকটিস করুন। কেননা এটা একবার দেখেই বুঝে ফেলাটা
যতটা সহজ ঠিক তেমনি ভাবে নিজের মত করে না লিখলে ভুলে যাওয়াটাও ততটাই সহজ।
আর শুধু যে আমাদের ব্যবহৃত উদাহরণটি প্র্যকটিস করতে হবে তা কিন্তু নয়।
আপনি ট্যাগ দুটি ব্যবহার করে অন্য কিছুও ট্রাই করতে পারেন।
এবার আসুন নতুন কিছুর সাথে পরিচিত হওয়া যাক। পূর্বের পর্ব গুলোতে আমরা বিভিন্ন প্রকার ভাবে টেক্সট ফরমেটিং এর বিষয় গুলা দেখেছি। কিন্তু এখানেই তো শেষ নয়। আমাদেরকে নিশ্চয় একটি সুন্দর ওয়েব সাইট ডিজাইন করতে হলে টেক্সট গুলোকে বিভিন্ন আকৃতি দিতে হবে, তাদের বিভিন্ন ধরনের কালার নির্ধারন করতে হবে, টেক্সট গুলো আপনার ওয়েব পেজের ঠিক কোথায় অবস্থান করবে সে বিষয়ে দিক নির্দেশনা প্রদান করতে হবে। আপনার ওয়েব পেজের ব্যাকগ্রাউন্ডে কি কালার হবে, কোন ছবি যুক্ত হবে কিনা, এ সমস্ত আরো অনেক বিষয় নিয়ে আপনাকে ভাবতে হবে। এবং এসমস্ত কাজের জন্যই বিভিন্ন প্রকার ট্যাগ এর সাথে আমাদেরকে বিভিন্ন প্রকার অ্যাট্রিবিউট ব্যবহার করতে হবে। এখন প্রশ্ন হল অ্যাট্রিবিউট কি। HTML অ্যাট্রিবিউট অনেক গুরুত্বপূর্ণ একটা বিষয়। HTML ট্যাগ এর কর্মক্ষমতাকে বৃদ্ধি করার জন্য অ্যাট্রিবিউট ব্যবহার করা হয়। নিম্নের ফরমেটটি ফলো করে সাধারনত অ্যাট্রিবিউট ব্যবহার করা হয়।
<tag attribute=”value” attribute=”value”>
উদাহরণ- <p style=”font-family : Verenda; color : read; font-size : 20px ”>
এখানে উদাহরণটি লক্ষ করলে দেখতে পাবেন এখানে শুরুতে প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয়েছে। তারপর আট্রিবিউট হিসেবে স্টাইল ব্যবহার করা হয়েছে। এবং ভ্যালু ফিল্ডে কি ধরনের স্টাইল হবে সে সম্পর্কে বলা হয়েছে। এখন আসুন আমারা কোড এ চলে যাই, নিম্নের কোডটি লিখুন।
এখন
এই কোডটি করার ফলে আপনি যে ফলাফল দেখতে পাবেন তা হল- আপনার ওয়েব পেজটির
ব্যাকগ্রাউন্ড কালার হলুদ, প্যারাগ্রাফ এর টেক্সট এর কালার লাল এবং টেক্সট
এর সাইজ কোডে ব্যবহৃত সাইজ এর অনুরুপ। আসা করছি বুঝতে কোন সমস্যা হয়নি।
আসুন একই কোডটি সামান্য একটি পরিবর্তন করে আর একবার দেখা যাক। ধরুন আপনি সমস্ত টেক্সট গুলোকে আপনার ওয়েব পেজের ঠিক মাঝখানে দেখতে চান তাহলে কি করবেন। কোডটিতে সামান্য একটু পরিবর্তন আনুন। বডি এর style অ্যাট্রিবিউট এর ভিতরে নতুন একটি ভ্যালু text-align:center যুক্ত করে দিন। সম্পূর্ণ কোডটি নিচে দেওয়া হলো-
আজ তাহলে এপর্যন্তই, সবাই ভাল থাকবেন।
- ওয়েব ডিজাইন এর হাতেখড়ি [পর্ব-০৩] :: সাবস্ক্রিপ্ট, সুপারস্ক্রিপ্ট এবং স্টাইল ট্যাগ এর ব্যবহার
আশা করছি পরম করুণাময় আল্লাহতালার অশেষ রহমতে সকলেই ভালো আছেন। জানিনা আমার লেখা আপনাদের কাছে কেমন লাগছে। আমার এই কার্যক্রম যদি আপনাদের বিন্দু মাত্র উপকারে আসলে আমার এই পরিশ্রম সার্থক হবে।
আজকের পর্ব শুরু করার আগে যে বিষয় এ কিছু কথা বলার প্রয়োজন বোধ করছি তা হলো, প্রত্যেকটি লেখা শুধু পড়লেই যে আপনি উপকৃত হবেন তা কিন্তু নয়। আপনাকে অবশ্যই প্রতিটি লেখা খুবই মনযোগ দিয়ে পড়তে হবে এবং সেগুলোকে ব্যবহারের মাধ্যমে আয়ত্ত করতে হবে। আর প্রত্যেকটি ট্যাগই মুখস্ত থাকতে হবে। আর ট্যাগ গুলো শুধু মুখস্ত করলেই যে সব হয়ে যাবে তা কিন্তু নয়। এগুলো সঠিক ভাবে ব্যবহার করা শিখতে হলে অবশ্যই আপনাকে নিয়মিত ভাবে প্রাকটিস করতে হবে, নাহলে এ বিশাল ট্যাগ ভান্ডার আপনি কখনোই মনে রাখতে সক্ষম হবেন না। তাহলে চলুন আজকের বিষয় বস্তু শুরু করা যাক।
আজকে আমরা মজার কিছু ট্যাগ এর ব্যবহার দেখব। চলুন তাহলে দেখে নেওয়া যাক-
ধরুণ কোন বীজগণিতে সূত্র যেমন- (a+b)2 = a2 + 2ab + b2 লিখতে চাচ্ছেন, ভাবছেন কিভাবে লিখবেন তাই না। নিচের কোডটি ব্যবহার করুন আশা করছি বুঝতে পারবেন আপনাকে কি করতে হবে।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <html><head><title> </title></head><body><p> (a+b)<sup>2</sup>= a<sup>2</sup> + 2ab + b<sup>2</sup></p></body></html><pre> |
এবার আসুন নতুন একটি প্রবলেম নিয়ে আলোচনা করি। আচ্ছা যদি কিনা সূত্রটি এমন হত-
(X1 + X2) = X12 + 2X1X2 + X22 অনেক জটিল মনে হচ্ছে তাই না ? আসুন তাহলে এর সমাধানটাও দেখে নেওয়া যাক। নিচের কোডটি ব্যবহার করুন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <html><head><title></title></head><body><p> (X<sub>1</sub>+X<sub>2</sub>)<sup>2</sup>= X<sub>1</sub><sup>2</sup> + 2X<sub>1</sub>X<sub>2</sub> + X<sub>2</sub><sup>2</sup></p></body></html><pre> |
এবার আসুন নতুন কিছুর সাথে পরিচিত হওয়া যাক। পূর্বের পর্ব গুলোতে আমরা বিভিন্ন প্রকার ভাবে টেক্সট ফরমেটিং এর বিষয় গুলা দেখেছি। কিন্তু এখানেই তো শেষ নয়। আমাদেরকে নিশ্চয় একটি সুন্দর ওয়েব সাইট ডিজাইন করতে হলে টেক্সট গুলোকে বিভিন্ন আকৃতি দিতে হবে, তাদের বিভিন্ন ধরনের কালার নির্ধারন করতে হবে, টেক্সট গুলো আপনার ওয়েব পেজের ঠিক কোথায় অবস্থান করবে সে বিষয়ে দিক নির্দেশনা প্রদান করতে হবে। আপনার ওয়েব পেজের ব্যাকগ্রাউন্ডে কি কালার হবে, কোন ছবি যুক্ত হবে কিনা, এ সমস্ত আরো অনেক বিষয় নিয়ে আপনাকে ভাবতে হবে। এবং এসমস্ত কাজের জন্যই বিভিন্ন প্রকার ট্যাগ এর সাথে আমাদেরকে বিভিন্ন প্রকার অ্যাট্রিবিউট ব্যবহার করতে হবে। এখন প্রশ্ন হল অ্যাট্রিবিউট কি। HTML অ্যাট্রিবিউট অনেক গুরুত্বপূর্ণ একটা বিষয়। HTML ট্যাগ এর কর্মক্ষমতাকে বৃদ্ধি করার জন্য অ্যাট্রিবিউট ব্যবহার করা হয়। নিম্নের ফরমেটটি ফলো করে সাধারনত অ্যাট্রিবিউট ব্যবহার করা হয়।
<tag attribute=”value” attribute=”value”>
উদাহরণ- <p style=”font-family : Verenda; color : read; font-size : 20px ”>
এখানে উদাহরণটি লক্ষ করলে দেখতে পাবেন এখানে শুরুতে প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয়েছে। তারপর আট্রিবিউট হিসেবে স্টাইল ব্যবহার করা হয়েছে। এবং ভ্যালু ফিল্ডে কি ধরনের স্টাইল হবে সে সম্পর্কে বলা হয়েছে। এখন আসুন আমারা কোড এ চলে যাই, নিম্নের কোডটি লিখুন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <html><head><title></title></head><body style="background-color:yellow"><h1 style="font-family:Verenda"> ABH World IT Academy </h1><p style="font-family:Arial; color:red; font-size:18px">ABH World IT academy is a well structured and one of the best IT academies of Bangladesh. </p></body></html><pre> |
আসুন একই কোডটি সামান্য একটি পরিবর্তন করে আর একবার দেখা যাক। ধরুন আপনি সমস্ত টেক্সট গুলোকে আপনার ওয়েব পেজের ঠিক মাঝখানে দেখতে চান তাহলে কি করবেন। কোডটিতে সামান্য একটু পরিবর্তন আনুন। বডি এর style অ্যাট্রিবিউট এর ভিতরে নতুন একটি ভ্যালু text-align:center যুক্ত করে দিন। সম্পূর্ণ কোডটি নিচে দেওয়া হলো-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <html><head><title>Use of Attribute</title></head><body style="background-color:yellow; text-align:center"><h1 style="font-family:Verenda"> Heading of a Paragraph </h1><p style="font-family:Arial; color:red; font-size:18px">This is a paragraph. Text color of this paragraph is read.</p></body></html><pre> |
No comments:
Post a Comment