বেসিক এইচটিএমএল(HTML)শিখুন টিউটোরিয়াল [পর্ব-৬ ] : এইচটিএমএল টেক্সট ফরম্যাটিং এবং লিংক [link]

image

 

শুরু করছি আজকের পর্ব। বেসিক এইচটিএমএল(HTML)শিখুন টিউটোরিয়াল [পর্ব-৬ ]  ।

আজকের আলোচনার বিষয়, টেক্সট ফরম্যাটিং কি ও লিংক কেমন করে কাজ করে। দুটো বিষয়ই এইচটিএমএল (HTML) এর জন্য গুরুত্বপূর্ণ বিষয়। গত পর্বে আলোচনা করেছিলাম এইচটিএমএল এর প্যারাগ্রাফ ও হেডিং [Heading] ট্যাগ নিয়ে। এগুলো সম্পর্কে জানতে চাইলে পূর্বের পোষ্ট দেখে আসতে পারেন।

টেক্সট ফরম্যাটিং কি :  

মাইক্রোসফট ওয়ার্ডে কোন টেক্সট বা লেখাকে মোটা তথা বোল্ড,ইতালিক ও আন্ডারলাইন করে সাজানোকে টেক্সট ফরম্যাটিং বলা হয়। সেরকম ওয়েবসাইটের লেখা গুলোকে টেক্সট ফরম্যাটিং করা যায়। আর ওয়েবসাইটের এই টেক্সট ফরম্যাটিং গুলো ট্যাগ এর মাধ্যমে করতে হয়। HTML এ টেক্সট ফরমেটিং এর জন্য <b>, <i>, <u>,<strong> ইত্যাদি ট্যাগ সমূহ ব্যবহার করা হয়।নিচে এগুলো ব্যবহার করে দেখি।

নিচের কোড টুকু আপনার এডিটরে কপি পেস্ট করুনঃ

 

<!DOCTYPE HTML>

<html>

<head>

<title> This is Site Title </title>

</head>

<body>

<b> This is Bold <b/> <br/>

<i> This is Italic <i/> <br/>

<u> This is underline <u/> <br/>

</body>

</html>

এরপর সেভ করে ব্রাউজারে ওপেন করলে নিচে প্রদর্শিত ছবির মত দেখাবে।এখানে তিন ধরনের লেখা দেখা যাবে যা এইচটিএমএল (HTML) টেক্সট ফরম্যাটিং এর উদাহরণ।

 

Screenshot_4

এইচটিএমএল (HTML) টেক্সট ফরম্যাটিং এর জন্য কতগুলো ট্যাগ নিচে দেয়া হল।

 

Tag Description (বর্ণনা)
<b> কোন text কে bold করতে এ tag ব্যবহার করা হয়।
<strong> গুরুত্বপূর্ণ Text কে তুলে ধরতে এই tag ব্যবহৃত হয়।
<i> কোন text কে italic করতে এই tag ব্যবহৃত হয়।
<em> Emphasized  text কে তুলে ধরতে এটি ব্যবহৃত হয়।
<small> ছোট কোন Text কে তুলে ধরা এই tag এর দ্বারা।
<u> Text কে underline করতে একে ব্যবহার করা হয়।
<mark> কোন text কে হাইলাইট করতে <mark> tag ব্যবহার করা হয়।

 

লিংক এর কাজঃ

লিংক এইচটিএমএল এর একটি গুরুত্বপূর্ণ বিষয়। এর আভিধানিক অর্থ সংযুক্ত করা। একটা ওয়েব পেজের সাথে অন্য একটা পেজকে যুক্ত করাই হল লিংকিং। HTML এ লিংকিং করার জন্য <a> ট্যাগ বা  anchor  ট্যাগ ব্যবহার করা হয় এবং সাথে “href” অর্থাৎ Hypertext Reference লিখতে হবে। যেমনঃ <a href= “এখানে সাইট এর লিঙ্ক” >এখানে আপনার পছন্দমত ওয়েবসাইটের নাম যেখানে আপনি ঢুকতে চান। </a>।

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

ইন্টারনাল হচ্ছে একই পেজের মধ্যে লিংক করা।

লোকাল হচ্ছে আপনার ওয়েবসাইটে এর ভিতরে কোন পেজেরে সাথে লিংক তৈরী করা। আর

গ্লোবাল  আপনার ওয়েবসাইটে এর বাইরে বা অন্য ওয়েবসাইটে এর সাথে লিংক তৈরী করা।

যেমনঃ

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

লোকাল- href=”http://sourcetune.com/

গ্লোবাল- href=” http://google.com/”

এবার চলুন লিংক এর কিছু ব্যবহার দেখি, নিচের কোডটি লিখুন বা কপি পেস্ট করুন আপনার এডিটরে।

<!DOCTYPE HTML><html>

 <head>

 <title> This is Site Title </title>

 </head>

 <body>

 <a href= http://sourcetune.com/“> Source tune </a></br>

 <a href=”http://google.com/> GOOGLE </a>

 

 </body>

</html>

 

 

 

 

এরপর সেভ করে যেকোনো ব্রাউজারে ওপেন করলে নিচের ছবির মতো দেখতে পাব। এখানে দুইটি ওয়েবসাইটের সাথে আপনার পেইজের লিঙ্কিং হয়ে গেছে।

Screenshot_3

 

 

        আর্টিকেলটি পড়ার জন্য ধন্যবাদ। আজ এই পর্যন্ত ,আগামী পর্ব দেখার দেখার আমন্ত্রণ জানিয়ে আজকের মতো এখানেই শেষ করছি। আগামী পর্বে লিখবো ছবি বা ইমেজ নিয়ে।

আরো পোস্ট দেখুন

comments