Web Design And Development Course-HTML Entities

Web Design And Development Course

Web Design And Development Course

বিস্তারিত:

HTML এ কিছু বিশেষ ধরনের ক্যারেক্টার আছে যেগুলি Document  ব্যবহার করলে সমস্যা হয়। যেমন,Less than, Greater than চিহ্ন ইত্যাদি। কেননা এগুলি Browse কে বিশেষ ইঙ্গিত দেয় যার ফলে এটা প্রদর্শন করার পরিবর্তে ঐ নির্দেশনা/ইঙ্গিত অনুসারে কাজ করে থাকে।এখন যদি এই ধরনের কোন চিহ্ন আপনি Web page  দেখাতে চান তাহলে HTML  Entities ব্যবহার করে দেখাতে পারবেন। এছাড়াও বিভিন্ন চিহ্ন যেমন কপিরাইট, ট্রেডমার্ক ইত্যাদি Web page দেখানো যায়।

প্রত্যেক Entities Ampersand এ (&) চিহ্ন দিয়ে শুরু হয় এরপর তার নাম এবং শেষে সেমিকোলন (;) দিয়ে পূর্ন করা হয়।

Entities নাম দিয়েও  প্রকাশ করা যায় আবার বিকল্প হিসেবে প্রত্যেকটি Entities এর একটা নাম্বার আছে সেটা দিয়েও প্রকাশ করা যেতে পারে বা করতে পারেন। নিচের কিছু নামভিত্তিক এনটাইটি দেয়া হল

কয়েকটি বহুল ব্যবহৃত এনটাইটি( Entity):

Web Design And Development Course

এগুলির নাম্বার যথাক্রমে,

Web Design And Development Course

 প্রদর্শন:

© ® ™ $ < >

P Tag বা যেকোন জায়গায় Space  দিতে চাইলে কয়েকটা Space Entitity বসিয়ে দিন হয়ে যাবে। ৪ নম্বরে যেটা আছে।

আমরা HTML এ লেস দেন এবং গ্রেটার দেন চিহ্ন ব্যবহার করে Tag তৈরী করি। এসব চিহ্ন Webpage এ দেখাতে চাইলে Entity ব্যবহার করতে হবে।

Web Design And Development Course

প্রদর্শন:

Less than – <
Greater than – >
Body tag – <body>

Web Design And Development Course-HTML Images

 

Web Design And Development Course

Web Design And Development Course

বিস্তারিত:

<img /> ট্যাগ ব্যবহার করে ওয়েব পেজে যেকোন ছবি প্রদর্শন করতে পারবেন। যেমন:

Web Design And Development Course

প্রদর্শন:

Web Design And Development Course

এখানে Src এবং Alt হচ্ছে Img ট্যাগের দুটি Attribute. Src দিয়ে ছবিটির অবস্থান দেখিয়ে দিতে হবে এবং Alt এর মধ্যে ছবিটির যে কোন বর্ননা দিতে পারবেন। ছবি লোড হতে দেরি হলে ততক্ষন Alt এর ভিতর লেখাটি দেখাবে।

Src এর ভিতর ছবিটির উৎস দুভাবে হতে পারে বা দিতে পারেন। Absolute Path অথবা Relative Path যেমন, আমরা রিলেটিভ পাথ দিয়েছি। আপনি চাইলে Absolute Path (পুরো ঠিকানা) দিতে পারেন। http://www.webcoachbd.com/images/stories/imagel.jpg

এছাড়া Height এবং Width এই দুটি নামে Attribute থাকে ।আপনাদের নাম দেখেই আন্দাজ হচ্ছে যে এদুটি দিয়ে কি করা যাবে। ছবির দৈর্ঘ্যে এবং প্রস্থ নির্ধারন করে দিতে পারেন।

 

** Width=”100″ বা Height=”200″ এভাবে দিলেই চলবে। 100px এভাবে দিতে হবেনা।

** যেকোন একটি দিলে একটি সুবিধা হচ্ছে Browser অপরটি Automatic  খাপ খাইয়ে নেয় ফলে ছবির আনুপাতিক আকার ঠিক থাকে। এত করে ছবিটি দেখতে সুন্দর এবং সামন্জস্যপূর্ন হয়।

আরো Attribute আছে যেমন align, valign এগুলি দিয়ে ছবির এলাইনমেন্ট ইচ্ছে মত দেয়া যায়

Align এর মান হতে পারে Right, Center, Left

আর Valign এর মান হতে পারে Top, Bottom, Center.

Web Design And Development Course

প্রয়োগ দেখুন

তবে এই এট্রিবিউট দুটি এখন আর বেশি ব্যবহার হয়না

Web Design And Development Course-HTML Tables

 

Web Design And Development Course

Web Design And Development Course

বিস্তারিত:

বিভিন্ন WebSite এ Table ভিত্তিক Data দেখেছেন নিশ্চয়ই। বিশেষ করে খেলাধুলার Site এ খেলোয়ারদের Square (স্কোর), Profile (প্রোফাইল),Timetable ( সময়সূচি), শেয়ার বাজারের হিসাব ইত্যাদি কাজে Table টেবিল লাগে। টেবিলভিত্তিক Data দেখানোর জন্য HTML  এর বেশকিছু Tag  আছে যেগুলি দিয়ে বিভিন্ন ধরনের Table তৈরী করা যায়। একটা টেবিল তৈরীতে প্রাথমিকভাবে ৩টি Tag লাগে যেমন,,

  1. 1. <table></table>
  2. 2. <tr></tr> (tr তে table row)
  3. 3. <td></td> (td তে table data)

এই ৩টি Tag দিয়ে একটা Table বানাতে পারবেন। পুরো Grid System  বানানো যাবে। Row ও Column দিয়ে

Tr দিয়ে Row বা সারি এবং Td দিয়ে Column বা স্তম্ভ বানানো হয়। একটা সাধারন টেবিল যেমন..

Web Design And Development Course

প্রদর্শন:

Web Design And Development Course

আমি দুটি Row এবং ৩টি করে কলাম ব্যবহার করেছি আপনি ইচ্ছে মত Row ব্যবহার করতে পারেন।

টেবিল শিরোনাম:

<th> নামে একটা Tag আছে এটা দিয়ে টেবিলের Header  বানানো যায় যেমন..

Web Design And Development Course

প্রদর্শন:

Web Design And Development Course

দেখুন Th  Element (এলিমেন্টের) লেখাগুলি Heading (হেডিং) আকারে দেখাচ্ছে।

তবে টেবিল দেয়ার উপযুক্ত নিয়ম হচ্ছে Table (টেবিলের) Header (হেডার), বডি এবং ফুটার সহ দেয়া। এজন্য কিছু Tag আছে এগুলি ব্যবহার করলে গ্রামাটিকালি টেবিলটি সঠিক হয় এরুপ একটি উদাহরন নিম্নে দেয়া হইছে যেমন…

Web Design And Development Course

প্রদর্শন (টেবিল C):

Web Design And Development Course

<tfoot>Tag (ট্যাগ) <tbody> এর আগে দেয়া হয়েছে, আর এভাবেই Browser সঠিকভাবে দেখাতে পারে।(দেখুন Tfoot এর ডেটা নিচেই দেখাচ্ছে)

 

উপরের Table (টেবিল)গুলিতে বর্ডার না দেয়াতে ভাল দেখাচ্ছে না এজন্য <table> Element বেশ কয়েকটি Attribute আছে যে গুলি দিয়ে টেবিল সুন্দর ভাবে সাজানো যায়। যেমন Table (টেবিলে) বর্ডার দিতে চাইলে <table border=”1″> এভাবে দিবেন  ফলে Table (টেবিল)টি কিছুটা সুন্দর লাগবে আবার আছে cell padding এবং cell spacing এদুটি দিয়ে cell বা অংশগুলির মধ্যে যথাক্রমে Padding (প্যাডিং) (কনটেন্ট থেকে বর্ডারের দুরত্ব) এবং দুরত্ব বাড়ানো যায় যেমন, উপরের টেবিলে <table border=”1″ cell padding=”10″> এটা যোগ করে আমাদের অনলাইন এডিটরে রান করলে দেখাতে পাবেন।

Row span এবং Col span:

TD, Th এ Row span এবং Col span Attribute দুটি ব্যবহার করে জটিল ধরনের টেবিল বানানো যায়্। Row span এর সংখ্যাত্নক মান দিয়ে ঠিক করা যায়  Rell টি কতটি Row এর সমান হবে যেমন,,

Web Design And Development Course

প্রদর্শন:

Web Design And Development Course

কোথাও  কোথাও Th, TD ইত্যাদি দিয়েছি ভালভাবে লক্ষ্য করুন নাহলে কিছুই বুঝবেননা। দেখুন দুটি Row এর জায়গা কিভাবে একটি Cell Th(Web Language)  দিয়ে দখল করা হয়েছে, Row span দিয়ে।

Col span দিয়ে কলাম দখল করা যায় যেমন, উপরের টেবিল C দেখুন সেখানে Tough দুটি কলামে রাখা হয়েছে যেটা অপ্রয়োজনীয়, ইচ্ছে করলে Col span ব্যবহার করে একটি কলামকেই দুটির সমান করা যায়। যেমন, ঐ উদাহরনটির ১৩ এবং ১৪ নাম্মার লাইনদুটির বাদ দিয়ে নিচের লাইনটি দিন।

Web Design And Development Course

Ok এবার Run (রান) করিয়ে দেখুন একটি কলামেই কাজ হয়ে গেছে।

** একটা Cell এর ভিতর (Td এর ভিতর) যেকোন HTML (এইচটিএমএল) Element (এলিমেন্ট) রাখতে পারেন। i mg, p বা যেকোন কিছু।

** গুরত্বপূর্ন এট্রিবিউটগুলিই শুধু আলোচনা করা হচ্ছে, এগুলি ছাড়াও align, bgcolor ইত্যাদি কমন Attribute গুলি ব্যবহার করা যাবে।

 

 

ওয়েব সাইট ডিজাইনে দক্ষ হতে চাইলে আমাদের  টিউটোরিয়াল দেখার পাশাপাশি গুগলে অনিক Web Design And Development Course আছে যেগুলো আপনাদের দেখা উচিত।

 See More Article…

Note: পরবর্তী Web Design And Development Course টিউটোরিয়ালে (Part-15) এইচটিএমএল রং টিউটোরিয়াল এর বিস্তারিত আলোচনা করা হবে।

See More Articles…

Web Design And Development Course-HTML Color code

Web Design And Development Course-HTML Background Tutorial

Web Design And Development -HTML Frame Tutorial in Bangle

Web Design And Development Course- HTML Layout Tutorial

 

 

2 thoughts on “Web Design And Development Course-HTML Entities”

  1. Pingback: Web Design And Development Course-HTML Font. -

  2. Pingback: Web Design And Development Course- HTML Link -

Leave a Comment

Your email address will not be published. Required fields are marked *

Recommended
Web Design And Development Course বিস্তারিত: HTML এ যেকোন Element…
Cresta Posts Box by CP