অসাধারন হাসির একটা নাটক দেখুন

মীর সাব্বিরের অতি কথা নাটকের অংশ দেখুন। হাসির জন্য পারফেক্ট

Very Funny Bangla Natok by Mir Sabbir হাসির... by smsohagsms

2.5 Use Style on the Web Page

পূর্বের পোষ্টগুলোতে আমরা বিভিন্ন ট্যাগের ব্যবহার দেখেছি। এখন আমরা দেখবো Style করা। প্রত্যেকটি ওয়েব সাইটেই বিভিন্ন ধরনের স্টাইল দিয়ে করা হয়। যে ষ্টাইল সুন্দর কালার কম্বিনেশন ভালো সে সকল সাইটে ভিজিটর একটু বেশিই সময় কাটায়। তাই ওয়েব ডিজাইনের ক্ষেত্রে স্টাইল সব সময় লক্ষ্য রাখতে হবে। তাছাড়া এ স্টাইল থেকেই আমরা Cascade Style Sheet (CSS) এর ধারনা পাবো। নিচের কোড দিয়ে আমরা ছোট আকারের একটা স্টাইল ব্যবহার করা দেখবো।

Use Style on the Web Page

Use Style on the Web Page

2.4 Horizontal Line Element

এই ট্যাগটি দিয়ে কোন লেখার নিচে Horizontal Line রেখা টানা হয়। অনেক সময় দেখা যায় আমরা একটা লেখা লেখলাম তার নিচে একটা লাইন টানা দরকার সে ক্ষেত্রে Horizontal Line Element ব্যবহার করা হয়। এ ট্যাগের জন্য <hr/> ব্যবহার করা হয়। এটি একটি খালি ট্যাগ।

Horizontal Line Element

Horizontal Line Element

2.3 Head Element in the Web page.

<h1>.........</h1>

এই ট্যাগটি বিভিন্ন আক্রিতির শিরোনামের ক্ষেত্রে ব্যবহার করা হয়। শিরোনাম বড় তেকে ছোট দেয়ার জন্য যথা ক্রমে <h1>...</h1>, <h2>...</h2>........ , <h6>...</h6> ব্যবহার করা হয়। প্রত্যেকটির পরেটা পূর্বেরটার থেকে ছোট হবে। এর পরে যদি <h7>...</h7> ব্যবহার করে তবে সে ট্যাগটি আর কাজ করবেনা। শিরোনাম ট্যাগ <h6>...</h6> পর্যন্তই শেষ। নিচের কোডটি দেখুন আর নিজে চেষ্টা করুন।

 

Head Element  Code

Head Element in the Web page

2.2 Paragraph Element

<p>....................</p>

যদি কোন অনুচ্ছেদ লিখতে চাই তবে উপরের ট্যাগ ব্যবহার করতে হবে। আমরা ইতি মধ্যে জেনেছি যে কোন লাইন শেষ করলে </br> ট্যাগ ব্যবকহার করা হয়, এই ট্যগ দিয়েও Paragraph তৈরি করা যায়। কিন্তু এখানে একটি প্যারা থেকে অন্য প্যারার মধ্যে কোন খালি লাইন থাকে না। পাশাপাশি দুইটি Paragraph থাকলে তার মধ্যে একটি খালি লাইন থাকতে হয়। যদি পরপর কয়েকবার </br> ব্যবহার করে থাকেন তাতে কোন প্রকার কাজ হবেনা। তাই অনুচ্ছেদ লিখতে আমাদের <p>....................</p> ট্যাগটি ব্যবহার করতে হবে। নিচের কোডটি দেখুন এবং ব্যবহার করুন।

Paragraph Element Code

Paragraph Element Result 

2.1 Blinking Element in Tag

<blink>...........................</blink>

লেখার ভেতরের যে অংশে এই ট্যাগটি ব্যবহার করবেন সেখানে জ্বলা নেভার একটি এনিমেশন তৈরী হতে থাকবে। যদিও এ ধরনের ইফেক্ট এখন CSS দিয়ে দেয়া হয় তবুও জেনে রাখা ভালো। নিচের কোডটি টাইপ করি।

 

Blink Code

এখন একটি ব্রাউজারে অপেন করে দেখি ফলাফল কি দেখা যাচ্ছে।

2.0 Bi-Directional Override (BDO) Element tag.

<bdo>…………….</bdo>

এই ট্যাগটির কাজ হচ্ছে আপনি যে লেখাটা HTML এ লিখে দিবেন ব্রাউজার তার উল্ট করে প্রদর্শন করবে। যেমন আপনি লিখলেন Filling Hot আর ব্রাউজারে দেখাবে toH gnilliF , নিচের কোডটি লিখে ব্রাউজার দিয়ে খুরে দেখুন।

Code

Result

1.9 Use Pre Element tag in web page.

<pre>………………….</pre>

এই ট্যাগটির সুবিধা হচ্ছে দীর্ঘ বাক্যের ক্ষেত্রে, টেক্সট এডিটর যেখানে লেখা লিখে সাজিয়ে দেবেন ব্রাউজারও সেইভাবে উপস্থাপন করবে। পেজ ছোট বা বড় করলেও টেক্সট ফরম্যাটের কোন পরিবর্তন হবেনা। এ ট্যাগের ভেতরে কোন <br> বা <p> ট্যাগের দরকার নেই। ব্রাউজার এখানে Moon spaced Font ব্যবহার করে। 

Pre Code

Note Pad এ নিচের কোডটি লিখুন, সেভ করুন এবং একটি ব্রাউজারে ওপেন করেন।

Pre Tag

1.8 Use Font & Formatting tag in a Web Page.

আমরা টেক্সট লেখার সফ্টওয়্যার গুলোতে লেখা বোল্ড, ইটালিক, আন্ডার লাইন ইত্যাদি ব্যবহার করি। এখন আমরা দেখবো কিভাবে Web Page এ ফরমেটিং করবো। ভিন্ন ভিন্ন পোষ্ট না করে এক সাথে কয়েকটা ফর্মেটিং দেখবো।

কয়েকটি ফর্মেটিং ট্যাগ

Bold                 : <b>……..</b>

Italics               : <i>…….…</i>

Strong              : <strong>……..</strong>

Big                   : <big>……..</big>

Small               : <small>…….</small>

Subscript         : _…..

Superscript      : ^…….

Emphasis        : <em>…….</em>

Underline         : <u>……….</u>

Insert               : <ins>…….</ins>

আপনার কম্পিউটারের Note Pad অপেন করেন এবং নিচের কোডগুলো টাইপ করেন।

Formating Coding 

এবার ফাইলটি Web page 5.html দিয়ে সেভ করুন এবং একটি ব্রাউজারে অপেন করি। দেখুন নিচের ছরিব মতো হয়েছে কি’না, যদি না হয় তবে আবার চেষ্টা করুন।

Formating 

1.7 Use Comments in a web page.

আমরা যখন একটা Web page নিয়ে কাজ করি তখন তার ভেতরে হাজার হাজার লাইন ও প্রচুর পরিমানে ট্যাগ ব্যবহার করেত হয়। অনেক সময় অথর নিজেও ভুলে যায় কোন ট্যাগ কোথায় শুরু বা কোন বিষয় কোতায় রাখা হয়েছিল। তাই লেখার ভেতরে Comments ব্যবহার করে উল্লেক করে রাখে কোন ট্যাগে কোন বিষয়ে লেখা হয়েছে। এত পরবর্তিতে একজন ওয়েব ডেভলপারের কাজ করতে সুবিধা হয়। খুব সহজে খুজে নিতে পারেন কোন ট্যাগে উন্নয়ন করা দরকার বা কোন ট্যাগ পরিবর্তন বা বাদ দেয়া দরকার। এ সকল কমেন্টস্ শুধু অথর দেকতে পাকে কোন ভিজিটর দেখতে পারেনা। এ কাজটি করার জন্য Web page 2.html বা Web page 3.html ফাইলটি Note pad এ অপেন করুন এবং নিচের কোডগুলো দেখে আপনি ফাইলটি এডিট করে নিন।

Comments

এখন ফাইল টি Web page 4.html দিয়ে সেভ করুন। ফাইলটি একটি ব্রাউজারে অপেন করেন এবং ফলাফল দেখুন। <--  --> ট্যাগের এর ভেতরে কমেন্টস লিখেতে হয়।

1.6 Line Break or BR on a web page.

আপনি এর পূর্বে Web page 2. html নামে যে ফাইলটি সেভ করে ছিলেন তা Note Pad দিয়ে অপেন করেন এবং নিম্নের কোডটি দেখে এডিট করেন। এখন ফাইলটি Web page ৩. html লিখে সেভ করেন। এবার সেভ করা Web page ৩. html ফাইল টি একটি ব্রাউজারে অপেন করেন এবং Web page 2. html ফাইলটিকেও অপেন করেন। দেখুন দুটি পেজের মধ্যে কোন ধরনের পার্থাক্য দেখা যাচ্ছে। এটাই মূলত Line Break or BR এর কাজ। একটি কথা বলা দরকার প্রতেকটি ট্যাগ আপনারা দেখেছেন <…> ট্যাগ এর মাধ্যমে শুরু হয়ে </…> ট্যাগ দিয়ে শেষ হয়েছে। কিন্তু Line Break ট্যাগটিতে শুধু <br/> ব্যবহার বরা হয়েছে। এর কারন Line Break ব্যবহার করতে কোন ধরনের শুরুর ট্যাগ দরকার হয়না।

Line Break