এইচটিএমএল-৪ [Link, Entities, Images, Tables]

Link

আপনি চাইলে আপনার সাইটের কোন টেক্সটের উপর লিংক তৈরী করে দিতে পারেন যেখানে ক্লিক করলে অন্য পেজ/সাইট আসবে। anchor tag এর সাহায্যে লিংক তৈরী করা হয়। শুধু টেক্সট নয় আপনি চাইলে একটা মেইল এড্রেসের উপর লিংক দিতে পারেন, একটা ছবির উপর লিংক দিতে পারেন, বড় কোন ওয়েব পেজের সুচিপত্র তৈরী করে এর আইটেমগুলিতে লিংক দিতে পারেন (এসব লিংকে ক্লিক করলে পেজেরই ঐ অংশে যাবে যেখান থেকে আইটেমটি শুরু হয়েছে)।

হাইপারটেক্সক্ট রেফারেন্স(href)

href এট্রিবিউট নিদের্শ করে যে ইউজার ক্লিক করে কোথায় যাবে।

Hypertext reference হতে পারে Internal, Local, Global ।

ইন্টারনাল: একই পেজের মধ্যে লিংক তৈরী হবে।

লোকাল: আপনার web site এর ভিতরে কোন পেজেরে সাথে লিংক তৈরী হবে।

গ্লোবাল: আপনার web site এর বাহিরে অন্য web site এর লিংক তৈরী হবে।

ইন্টারনাল- href="#anchorname"

লোকাল- href="/webcoachbd/../pics/picturefile.jpg"

গ্লোবাল- href="http://www.tizag.com/"

এইচটিএমএল লিংক (টেক্সক্ট) যেভাবে তৈরী করবেন

<a> এবং  </a> tag দ্বারা যথাত্রুমে লিংক শুরু এবং শেষ বোঝায়।  href এট্রিবিউট এর সাহায্যে কোন ধরনের লিংক স্থাপিত হবে তা নির্ধারিত হয়। href এট্রিবিউটকে opening tag এর মধ্যে রাখতে হয়। opening এবং closing tag এর মধ্যে কোন লেখা থাকলে, তা পরে web পেজে লিংক হিসাবে দেখা যাবে।যেমন

1.<a href="http://www.webcoachbd.com/" target="_blank" >Webcoachbd Home</a>

2.<a href="http://www.google.com/" target="_blank" >Google Home</a>

3. 

4.<a href="http://www.yahoo.com/" target="_blank" >Yahoo Home</a>

প্রদর্শন: গ্লোবাল লিংক

Webcoachbd Home         Google Home              Yahoo Home

এইচটিএমএল লিংক টার্গেট (HTML-link Target)

a ট্যাগে target এট্রিবিউট দিয়ে ঠিক করা যায় যে লিংকটি কিভাবে খুলবে যেমন "_blank" দিলে নতুন উইন্ডোতে আবার "_self" দিলে উক্ত পেজেই লিংকটি লোড হবে।

1.<a href="http://www.webcoachbd.com/html-tutorials/html-radio-check" target="_blank">Radio button tutorial</a>

প্রদর্শন

Radio button tutorial

এখানে ক্লিক করুন নতুন একটি উইন্ডোতে (ট্যাবে)  পেজটি খুলবে।

এইচটিএমএল ইমেইল লিংক

টেক্সট লিংক উপরে যেভাবে তৈরী করলেন ইমেইল লিংকও সেভাবে করতে হবে শুধু href এট্রিবিউটের ভিতর ইনভার্টেড কমার মধ্যে আগে ওয়েব সাইটের ঠিকানা ছিল আর এবার ইমেইল ঠিকানা দিবেন।যেমন

<a href= "mailto:abc@mail.com" >Email Example</a>

প্রদর্শন:

Email Example

এই লিংকের উপর মাউস নিয়ে যান, নিচে স্টাটাসবারে mailto:abc@mail.com লেখা দেখাবে। এখানে ক্লিক করলে আপনার ব্রাউজার abc@mail.com  নামের একটি মেইল ঠিকানায় মেইল পাঠানোর ক্ষেত্র প্রস্তুত করবে।আরও সহজভাবে বলি, ধরুন আপনি মজিলা ফায়ারফক্স ব্রাউজার ব্যবহার করছেন, আপনি যদি Tools>Options>Applications এ গিয়ে mailto এর জায়গায় ড্রপডাউন মেনু থেকে Use Yahoo mail সিলেক্ট করে দেন তাহলে Email Example লিংকে ক্লিক করলে আপনার ইয়াহু মেইল খুলবে এবং To ফিল্ডের জায়গায় abc@mail.com লেখা উঠবে।

আপনি চাইলে ইমেইল লিংকে subject এবং body ঠিক করে দিতে পারেন যেমন

<a href= "mailto: a@b.com?subject=Web Page Email&body=This email is from your website" > 2nd Email Example</a>

প্রদর্শন:

2nd Email Example

এখানে ক্লিক করলে আপনার ইয়াহু মেইল খুলবে এবং To এর জায়গায় a@b.com আর Subject এর জায়গায় Web Page Email ও Body তে This email from your site এগুলি গিয়ে অটোমেটিক বসবে।

ইন্টারনাল লিংক

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

পেজের উপরে যান

টেক্সট লিংক

"পেজের উপরে যান" এখানে ক্লিক করলে পেজের কোথায় যাবে তা আগেই ঠিক করে রাখতে হবে এভাবে

<h3>হাইপারটেক্সক্ট রেফারেন্স(href)<a name="top"></a></h3>

পরের লিংকটিও এভাবে করে নিতে হবে (এখানে name="text")

শেষে "পেজের উপরে যান" এর উপর লিংক দিয়েছি এভাবে

<a href="#top">পেজের উপরে যান</a>

এবং

<a href="#text">টেক্সট লিংক</a>

Entities

এইচটিএমএল এ কিছু বিশেষ ক্যারেক্টার আছে যেগুলি ডকুমেন্টে ব্যবহার করলে সমস্যা হয়। যেমন less than, greater than চিহ্ন ইত্যাদি। কেননা এগুলি ব্রাউজারকে বিশেষ ইঙ্গত দেয় যার ফলে এটা প্রদর্শন করার পরিবর্তে ঐ নির্দেশনা/ইঙ্গিত অনুসারে কাজ করে।এখন যদি এই ধরনের কোন চিহ্ন আপনি ওয়েব পেজে দেখাতে চান তাহলে এইচটিএমএল এনটাইটি ব্যবহার করে দেখাতে পারবেন। এছাড়াও বিভিন্ন চিহ্ন যেমন কপিরাইট, ট্রেডমার্ক ইত্যাদি ওয়েব পেজে দেখানো যায়।

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

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

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

1.©

2.®

3.™

4. 

5.$

6.<

7.>

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

1.©

2.®

3.™

4. 

5.$

6.<

7.>

 প্রদর্শন

© ® ™ $ < >

 p ট্যাগে বা যেকোন জায়গায় স্পেস দিতে চাইলে কয়েকটা স্পেস এনটাইটি বসিয়ে দিন হয়ে যাবে। ৪ নম্বরে যেটা আছে।

আমরা এইচটিএমএল এ লেস দেন এবং গ্রেটার দেন চিহ্ন ব্যবহার করে ট্যাগ তৈরী করি। এসব চিহ্ন ওয়েব পেজ এ দেখাতে চাইলে এনটাইটি ব্যবহার করতে হবে।

1.<p>

2.Less than - &lt; <br />

3.Greater than - &gt; <br />

4.Body tag - <body>

5.</p>

প্রদর্শন:

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

Images

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

1.<img src="/sunset.gif" alt="Sunset" />

প্রদর্শন

 

এখানে src এবং alt হচ্ছে img ট্যাগের দুটি এট্রিবিউট। src দিয়ে ছবিটির অবস্থান দেখিয়ে দিতে হবে এবং alt এর মধ্যে ছবিটির কোন বর্ননা দিতে পারবেন। ছবি লোড হতে দেরি হলে ততক্ষন alt এর ভিতর লেখাটি দেখায়।

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

 

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

 

** width="100" বা height="200" এভাবে দিলেই হবে। 100px এভাবে দিতে হবেনা।

 

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

 

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

align এর মান হতে পারে right, center, left

আর valign এর মান হতে পারে top, bottom, center

1.<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

2.<img align="right" src="/images/stories/imagel.jpg" alt="sunset"/>

3.<p> Ut wisi enim </p>

 

Tables

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

১. <table></table>

২. <tr></tr> (tr তে table row)

৩. <td></td> (td তে table data)

 এই ৩টি ট্যাগ দিয়ে একটা টেবিল বানাতে পারবেন। পুরো grid সিস্টেম বানানো যাবে। row এবং column দিয়ে

tr দিয়ে row বা সারি এবং td দিয়ে column বা স্তম্ভ বানানো হয়। একটা সাধারন টেবিল

01.<table>

02.<tr>

03.<td>HTML</td>

04.<td>JS</td>

05.<td>SQL</td>

06.</tr>

07.<tr>

08.<td>CSS</td>

09.<td>PHP</td>

10.<td>MySQL</td>

11. 

12.</tr>

13.</table>

প্রদর্শন:

HTML	JS	SQL
CSS	PHP	MySQL

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

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

<th> নামে একটা ট্যাগ আছে এটা দেয়া টেবিলের হেডার বানানো যায় যেমন

01.<table>

02.<tr>

03.<th>Markup</th>

04.<th>Programming</th>

05.<th>Database</th>

06.</tr>

07.<tr>

08.<td>HTML</td>

09.<td>JS</td>

10.<td>SQL</td>

11.</tr>

12.<tr>

13.<td>CSS</td>

14.<td>PHP</td>

15.<td>MySQL</td>

16.</tr>

17. 

18.</table>

প্রদর্শন

Markup	Programming	Database
HTML	JS	SQL
CSS	PHP	MySQL

 দেখুন th  এলিমেন্টের লেখাগুলি হেডিং আকারে দেখাচ্ছে।

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

01.<table>

02.<thead>

03. 

04.<tr>

05.<th>Markup</th>

06.<th>Programming</th>

07.<th>Database</th>

08.</tr>

09.</thead>

10.<tfoot>

11.<tr>

12.<td>Easy</td>

13.<td>Tough</td>

14.<td>Tough</td>

15.</tr>

16. 

17.</tfoot>

18.<tbody>

19. 

20.<tr>

21.<td>HTML</td>

22.<td>JS</td>

23.<td>SQL</td>

24.</tr>

25.<tr>

26.<td>CSS</td>

27.<td>PHP</td>

28.<td>MySQL</td>

29.</tr>

30.</tbody>

31. 

32.</table>

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

Markup	Programming	Database
Easy	Tough	Tough
HTML	JS	SQL
CSS	PHP	MySQL

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

উপরের টেবিলগুলিতে বর্ডার না দেয়াতে ভাল দেখাচ্ছে না এজন্য <table> এলিমেন্টে বেশ কয়েকটি এট্রিবিউট আছে যেগলি দিয়ে টেবিল সুন্দর সাজানো যায়। যেমন টেবিলে বর্ডার দিতে চাইলে <table border="1"> এভাবে দিবেন  ফলে টেবিলটি কিছুটা সুন্দর লাগবে আবার আছে cellpadding এবং cellspacing এদুটি দিয়ে cell বা অংশগুলির মধ্যে যথাক্রমে প্যাডিং (কনটেন্ট থেকে বর্ডারের দুরত্ব) এবং দুরত্ব বাড়ানো যায় যেমন উপরের টেবিলে <table border="1" cellpadding="10"> এটা যোগ করে আমাদের অনলাইন এডিটরে রান করিয়ে দেখাতে পারেন।

rowspan এবং colspan

td, th এ rowspan এবং colspan এট্রিবিউট দুটি ব্যবহার করে জটিল ধরনের টেবিল বানানো যায়্। rowspan এর সংখ্যাত্নক মান দিয়ে ঠিক করা যায় cell টি কতটি row এর সমান হবে যেমন

01.<table border="1">

02.<tr>

03.<th rowspan="2">Web Language</th>

04.<td>HTML</td>

05.<td>CSS</td>

06.</tr>

07.<tr>

08.<td>PHP</td>

09.<td>JS</td>

10.</tr>

11.<tr>

12.<th>Framework</th>

13.<td>CI</td>

14.<td>Bootstrap</td>

15.</tr>

16.</table>

প্রদর্শন:

Web Language	HTML	CSS
	PHP	JS
Framework	CI	Bootstrap

কোথায় th, td ইত্যাদি দিয়েছি ভালভাবে লক্ষ্য করুন নাহলে কিছুই বুঝবেননা। দেখুন দুটি row এর জায়গা কিভাবে একটি cell th(Web Language)  দিয়ে দখল করা হয়েছে, rowspan দিয়ে।

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

1.<td colspan="2"></td>

ব্যাস এবার রান করিয়ে দেখুন একটি কলামেই কাজ হয়ে গেছে।

** একটা cell এর ভিতর (td এর ভিতর) যেকোন এইচটিএমএল এলিমেন্ট রাখতে পারেন। img, p বা যেকোন কিছু।

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