Tag Archives: লিঙ্ক

ডেটা কমিউনিকেশন ও কম্পিউটার নেটওয়ার্ক : ডাটা লিঙ্ক লেয়ার : ভূমিকা (DCN – Data-link Layer Introduction)

Huge Sell on Popular Electronics

রিদওয়ান বিন শামীম

 

ডাটা লিঙ্ক লেয়ার ওসিআই মডেলের দ্বিতীয় লেয়ার। এই লেয়ার জটিল লেয়ারগুলোর মধ্যে একটি, এর কিছু জটিল ফাংশনালিটি ও দায়িত্বও আছে।এটি হার্ডওয়ারগত তথ্য গোপন করে উপরের লেয়ারে যোগাযোগের মাধ্যম হিসেবে উপস্থাপন করে।

ডাটা লিঙ্ক লেয়ার এমন দুটি হোষ্টের মাঝে কাজ করে যারা কিছ কিছু ক্ষেত্রে সরাসরি সম্পৃক্ত, এই সরাসরি সম্পৃক্ততা দুটি পয়েন্টের মধ্যে বা সম্প্রচারগতও হতে পারে। ব্রডকাস্ট নেটওয়ার্কের সিস্টেম একই লিঙ্কে থাকে। ডাটা লিঙ্ক লেয়ারের কাজ আরও জটিল হয়ে যায় যখন একক সংঘর্ষ ডোমেইনে সেটিকে অনেকগুলো হোষ্ট নিয়ে কাজ করতে হয়।

ডাটা স্ট্রিমকে বাইট বাই বাইট সিগন্যালে রূপান্তরিত করা ও তাকে সংশ্লিষ্ট হার্ডওয়ারে প্রেরণের দায়িত্বও ডাটা লিঙ্ক লেয়ারের। রিসিভিং এন্ডে ডাটা লিঙ্ক লেয়ার হার্ডওয়ার থেকে ডাটা নিয়ে ফ্রেম ফরমেটে রূপ দিয়ে ঊর্ধ্বতন লেয়ারে প্রেরণ করে। ডাটা লিঙ্ক লেয়ারের দুটি সাব লেয়ার আছে,

  • লজিকাল লিঙ্ক কন্ট্রোলঃ এটি প্রটোকল, ফ্লো কন্ট্রোল ও এরর কন্ট্রোল নিয়ে কাজ করে।
  • মিডিয়া এক্সেস কন্ট্রোলঃ এটি মাধ্যমের প্রকৃত কন্ট্রোল নিয়ে কাজ করে।

 

ডাটা লিঙ্ক লেয়ারের কিছু ফাংশনালিটি আছে, এগুলো হল,

  • ফ্রেমিংঃ ডাটা লিঙ্ক লেয়ার নেটওয়ার্ক লেয়ার থেকে ডাটা প্যাকেট নিয়ে ফ্রেমে প্রক্রিয়াজাত করে।
  • এড্রেসিংঃ ডাটা লিঙ্ক লেয়ার লেয়ার-২ হার্ডওয়ার এড্রেসিং মেকানিজম প্রবর্তন করে।
  • সিনক্রোনাইজেশনঃ যখন ডাটা ফ্রেমকে লিঙ্কে পাঠানো হয় তখন উভয় যন্ত্রকে সমন্বিত হতে হয়।
  • এরর কন্ট্রোলঃ এটি সিগন্যাল সংক্রান্ত ভুল নিয়ন্ত্রণে কার্যকর।
  • ফ্লো কন্ট্রোলঃ দুটি যন্ত্রের ট্রান্সফারের গতি যেন এক হয় তা নিয়ন্ত্রণে ডাটা লিঙ্ক লেয়ার এটি ব্যবহার করে।
  • মাল্টি এক্সেসঃ মাল্টিপল সিস্টেমে সংঘর্ষ ছাড়া শেয়ারড মিডিয়া ব্যবহারের জন্য এই ফাংশনালিটি প্রয়োজন হয়।

 

HTML Head (এইচটিএমএল হেড)

Huge Sell on Popular Electronics

Atik Hasan

Webpage design & developer

 

HTML Head (এইচটিএমএল হেড):

<head>…..</head> ট্যাগ দিয়ে head সেকশন গঠিত। head সেকশনে meta data অর্থাৎ ডকুমেন্ট সম্পর্কিত তথ্য থাকে।এই head সেকশন এ যা কিছু লেখা হয় তা ওয়েব পেইজ এ দেখা যায় না। head সেকশন এ সাধারণত নিম্মের ট্যাগগুলো থাকেঃ

Title, Meta, Link, Base, Style, Script

 

শিরোনাম ট্যাগ

এই ট্যাগের মাঝে যা লিখা হয় তা Browser এর টাইটেল বারে দেখা যায়। মূলত ওয়েব পেইজ content এর একটি সংক্ষিপ্ত টাইটেল এই ট্যাগের মাঝে লেখা হয়। যেমন আমি যদি ওয়েব পেইজ ডিজাইনের বিভিন্ন এলিমেন্ট নিয়ে একটি ওয়েব পেইজ বানাতে চাই তা হলে টাইটেল নিচের মত হলে ভাল হয়ঃ-


<title>web page design tutorial</title>


 

 

মেটা ট্যাগ

এই ট্যাগ ব্যাবহার করা হয় ডকুমেন্ট সম্পর্কিত সকল তথ্য সন্নিবেশ/বর্ণনা করার জন্য।মেটা ডাটা browser, search engine এবং অন্নান্য ওয়েব সারভিস দ্বারা বেবহৃত হয়।  সার্চ ইঞ্জিন ইনডেক্সিং এর জন্য এ ট্যাগের গুরুত্ত অপরিসীম।

সার্চ ইঞ্জিনের জন্য keywords নির্ধারণ করাঃ


<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">


 

 

ওয়েব পেজ এর description নির্ধারণ করাঃ


<meta name="description" content="Free Web tutorials on HTML and CSS">


 

 

ওয়েব পেজ এর author নির্ধারণ করাঃ


<meta name="author" content="Hege Refsnes">


 

 

ওয়েব পেজ এর character set নির্ধারণ করাঃ


<meta charset="UTF-8">


 

 

৩০ সেকন্ড পরপর ওয়েব পেজ auto refresh করাঃ


<meta http-equiv="refresh" content="30">


 

 

লিঙ্ক ট্যাগ

Link ট্যাগটি দ্বারা একটি পেইজকে অন্য পেইজের সাথে বা এলিমেন্টের সাথে সম্পর্ক ইস্থাপন করা হয়।এই ট্যাগ টি সাধারণত স্টাইল শীট যোগ করার জন্য ব্যাবহার করা হয়।


<link rel="stylesheet" href="mystyle.css">


 

 

বেজ ট্যাগ

Base ট্যাগ টি দ্বারা ওয়েব সাইটের সকল লিঙ্ক জন্য এর একটি default অ্যাড্রেস বা default target  সেট করিয়ে দেয়া হয়।যেমনঃ-


<base href="http://bangla.salearningschool.com" target="_blank">


 

 

যেহেতু আমরা base অ্যাড্রেসের target হিসেবে _blank দিয়েছি সেহেতু এই পেইজের কোন লিঙ্ক এ ক্লিক করলে নতুন একটি ট্যাব এ পেজটি ওপেন হবে।

 

স্টাইল ট্যাগ (Style Tag)

HTML ডকুমেন্টটিতে কি ধরণের ইস্টাইল ব্যাবহার হবে তা এই style ট্যাগ দ্বারা লেখা হয়। যেমনঃ-


<style>
body {background-color:yellow;}
</style>

 

 

স্ক্রিপ্ট ট্যাগ (Script Tag)

Script ট্যাগটি Java script লেখার জন্য ব্যাবহার করা হয়। যেমন আমরা ওয়েব পেজ এ Hello JavaScript এই লেখাটুকো দেখাব demo নামক id ব্যাবহার করে।


<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

 

 

এইচটিএমএল লিঙ্ক (HTML Link)

Huge Sell on Popular Electronics

এইচ টি এম এল লিঙ্ক

স্বর্ণা আখতার

সম্পাদনাঃ মোঃ রফিকুল ইসলাম

 

প্রায় সকল ওয়েবপেজ এ লিঙ্ক রয়েছে। লিঙ্ক এ ক্লিক করার মাধ্যমে ব্যবহারকারী এক পেজ থেকে অন্য পেজে যেতে পারে।

এইচটিএমএল লিঙ্ক - হাইপারলিঙ্ক

হাইপারলিঙ্ক হচ্ছে একটি Text, বা ছবি যার উপর ক্লিক করার মাধ্যমে আপনি অন্য আরেকটি ওয়েবপেজে/ডকুমেন্ড এ চলে যেতে পারে।

 

এইচটিএমএল লিঙ্ক - সিনট্যাক্স

এইচ টি এম এল এ লিঙ্ক সিনট্যাক্সগুলো কিভাবে গঠিত হয় নিচে তাঁর উদাহরন তুলে ধরা হল, <a> ট্যাগ দ্বারা লিঙ্ককে সঙ্গায়িত করা হয়।

লিঙ্ক সিনট্যাক্স


<a href="url">link text</a>


উদাহরনঃ


<a href="http://bangla.salearningschool.com/html/">Visit our HTML tutorial</a>


 

ফলাফলঃ


Visit our HTML tutorial


এখানে href অ্যাট্রিবিউট ওয়েব পেজ এর গন্তব্যকে নির্দেশ করে করে যেমন, http://bangla.salearningschool.com/html/
আর link text (Visit our HTML tutorial) হল প্রদর্শিত অংশ যার উপর ক্লিক করলে আপনি একটি নির্দিষ্ট ওয়েব পেজ এ স্থানান্তিরিত হবেন।

নেটঃ link text সবসময়ই টেক্স হতে হবে এমন কোন কথা নেই, এটি ছবি বা এইচটিএমএল এর যেকোন উপাদান হতে পারে।

 

লোকাল লিঙ্ক

উপরের উদাহরণে একটি সংয়সম্পূর্ণ ওয়েব এড্রেস (URL) ব্যবহার করা হয়েছে।

একটি লোকাল লিঙ্ক (একই ওয়েব সাইটের লিঙ্ক) নির্দিষ্ট করা হয় আপেক্ষিক URL এর সাহায্যে (http://www.... ব্যতীত)

যেমনঃ


<a href="html_images.asp">HTML Images</a>


 

এইচটিএমএল লিঙ্ক - কালার এবং আইকন

আপনি যখন কোন লিঙ্ক এর উপর নিয়ে যান তখন সাধারণত দুপ্রকার ঘটনা ঘটতে পারেঃ

১. মাউস এর তীর টিহ্নটি একটা ছোট হাতের রুপ নিতে পারে।
২. লিঙ্ক এর বিষয়বস্তু যেমন লিঙ্ক টেক্সট ইত্যাদির কালার পরিবর্তন হয়ে থাকে।

সাধারনত লিঙ্কগুলো যে কোন ব্রাউজার এ নিম্নোক্তভাবে দেখা যায়

১. অদেখা লিঙ্কগুলোর নিচে আন্ডার লাইন এবং এদের কালার নীল হয়।
২. দেখা লিঙ্কগুলোর নিচেও আন্ডার লাইন থাকে কিন্তু এদের কালার সাধারনত রক্তবর্ণ হয়।
৩. একটা সচল লিঙ্কএর নিচেও একইভাবে আন্ডার লাইন কিন্তু লাল কালারের হয়ে থাকে।

আপনি style ব্যবহার করে ডিফল্ট কালার ও আন্ডারলাইন পরিবর্তন করতে পারেন।

উদাহরণঃ


<style>
a:link   
{color:#000000; background-color:transparent; text-decoration:none}
a:visited {color:#000000; background-color:transparent; text-decoration:none}
a:hover   {color:#ff0000; background-color:transparent; text-decoration:underline}
a:active  {color:#ff0000; background-color:transparent; text-decoration:underline}
</style>

এইচটিএমএল লিঙ্ক - টার্গেট অ্যাট্রিবিউট

target অ্যাট্রিবউট নির্দারণ করে ডকুমেন্টটি কোথায় খুলবে।

উদাহরণস্বরূপ ডকুমেন্টটি একই উইন্ডোতে খুলতে পারে বা নতুন ট্যাব এও খুলতে পারেঃ


<a href="http://bangla.salearningschool.com/html/" target="_blank">Visit our HTML tutorial</a>


 

ফলাফল


Visit our HTML tutorial


 

Target Value বিবরণ
_blank লিঙ্ককৃত ডকুমেন্টটি নতুন একটি উইন্ডো বা ট্যাব এ খোলে
_self লিঙ্ককৃত ডকুমেন্টটি যে ফ্রেমে ক্লিক করেছেন সেই একই ফ্রেমে খুলবে (এটিই ডিফল্ট হিসেবে থাকে)
_parent লিঙ্ককৃত ডকুমেন্টটি মুল ফ্রেমে খোলে
_top লিঙ্ককৃতডকুমেন্টটি সম্পূর্ণ উইন্ডো জুড়ে খোলে
framename লিঙ্ককৃত ডকুমেন্টটি নির্দিষ্ট নামের ফ্রেমে খোলে

 

আপনার ওয়েব পেজটি যদি একটি ফ্রেম লক করা থাকে, তাহলে target="_top" ব্যহার করে লক ভেঙ্গে ফেলতে পারেন।

উদাহরণঃ


<a href="http://bangla.salearningschool.com/html/" target="_top">Visit our HTML tutorial</a>


 

ফলাফলঃ


Visit our HTML tutorial


 

এইচটিএমএল লিঙ্ক - ইমেজ/ছবি লিঙ্ক হিসেবে ব্যবহার

ইমেজকে লিঙ্ক হিসেবে ব্যবহার করা খুবই সাধারণ

উদাহরণঃ


<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>

 

ফলাফলঃ


smiley


 

এইচটিএমএল লিঙ্ক - id অ্যাট্রিবিউট

<a> এলিমেন্ট এর সাথে একটি id অ্যাট্রিবউট যোগ করুন


<a id="tips">Useful Tips Section</a>


 

<a> এলিমেন্ট এ একটি লিঙ্ক সংযুক্তকরণ


<a href="#tips">Visit the Useful Tips Section</a>


 

<a> এলিমেন্ট এ অন্য পেজ এর একটি লিঙ্ক যুক্তকরণ


<a href="http://bangla.salearningschool.com/html_links.htm#tips">Visit the Useful Tips Section</a>


 

 

সারসংক্ষেপ

• এইচটিএমএল <a> এলিমেন্ট এর ব্যবহার লিঙ্ককে সঙ্গালিত করে

• এইচটিএমএল href অ্যাট্রিবউট এর ব্যবহার লিঙ্ক এর এড্রেসকে সঙ্গায়িত করে

• এইচটিএমএল target অ্যাট্রিবউট এর ব্যবহার  লিঙ্কটি কোথায় খুলবে তা বোঝায়

• এইচটিএমএল <img> এলিমেন্ট এর ব্যবহার ইমেজ/ছবিকে লিঙ্ক সিহেবে ব্যবহার করে

• এইচটিএমএল id অ্যাট্রিবউট (id="value") এর ব্যবহার বুকমার্ক ডিফাইন করার জন্য ব্যবহৃত হয়

• এইচটিএমএল href অ্যাট্রিবউট (href="#value") এর ব্যবহার বুকমার্ক এ ঠিকানা বুঝায়

 

এইচটিএমএল এর মৌলিক বিষয় (HTML Basic Example)

Huge Sell on Popular Electronics

এইচ টি এম এল এর সাধারন বিষয়াবলী

স্বর্ণা আখতার

 

(টিউটোরিয়াল টি পড়ার আগে অবশ্যই আপনাকে এইচ টি এম এল ট্যাগ এর ব্যবহার সম্পর্কে জানতে হবে। পরবর্তী অধ্যায় এ ট্যাগ সম্পর্কে আলোচনা করা হয়েছে।)

 

এইচ টি এম এল ডকুমেন্ট

সকল এইচ টি এম এল ডকুমেন্ট অবশ্যই ডকুমেন্ট এর টাইপ ঘোষণা এর মাধ্যমে শুরু করতে হয়। যেমন, <DOCTYPE html>

এইচ টি এম এল এর শুরু হয় <html> ট্যাগ দিয়ে এবং শেষ হয় </html> এর মাধ্যমে।

<body> এবং </body> এর মধ্যে প্রদর্শিত টেক্সট এইচ টি এম এল ডকুমেন্ট এর বিষয়বস্তু হিসাবে গণ্য হয়।

উদাহরনের সাহায্যে নিচে দেখানো হল


<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>


 

 

ফলাফল


My First Heading

My first paragraph.


 

 

এইচ টি এম এল এর শিরোনাম

এইচ টি এম এল এর শিরোনাম গুলো <h1> এবং <h6> ট্যাগ দ্বারা নির্ধারণ করা হয়।

যেমন,


<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>


 

 

ফলাফল


This is a heading

This is a heading

This is a heading


 

এইচ টি এম এল প্যারাগ্রাফ

এইচ টি এম এল প্যারাগ্রাফগুলোকে <p> ট্যাগে দ্বারা নির্ধারণ করা হয়।

যেমন,


<p>This is a paragraph.</p>
<p>This is another paragraph.</p>


 

 

ফলাফল


This is a paragraph.

This is another paragraph.


 

এইচ টি এম এল লিঙ্ক

এইচ টি এম এল এর লিঙ্কগুলো <a> ট্যাগের মাধ্যমে লিখা হয়।

যেমন,


<a href="http://bangla.salearningschool.com">This is a link</a>


 

 

ফলাফল


This is a link


 

এখানে, লিঙ্ক এড্রেস গুলো কি রকম হবে তা নির্ভর করে “href” attribute এর উপর। আর অ্যাট্রিবিউট গুলো এইচ টি এম এল এর উপাদানগুলো সম্পর্কে বিস্তারিত বিবরণ প্রদান করে।

এইচ টি এম এল ইমেজ

এইচ টি এম এল ইমেজগুলোকে <img> ট্যাগের মাধ্যমে লিখা হয়। আর এখানে src, alt, height এবং width গুলো অ্যাট্রিবিউট হিসাবে ব্যবহার করা হয়।

উদাহরনের মাধ্যমে দেখানো হল,


<img src="http://bangla.salearningschool.com/wp-content/uploads/2015/04/bangla.salearning.png" alt="http://bangla.salearningschool.com" width="660" height="150">


 

 

ফলাফল


http://bangla.salearningschool.com


সি এস এস লিঙ্ক (CSS Links)

Huge Sell on Popular Electronics

স্টাইলিং লিঙ্ক

সিএসএস প্রোপার্টি দ্বারা লিঙ্ক স্টাইল করা যেতে পারে (যেমন: color, font-family, background, ইত্যাদি)


a {
    color: #FF0000;
}

 

লিঙ্ক এর অবস্থা অনুসারে একে স্টাইল করা যেতে পারে।

লিঙ্ক এর চারটি অবস্থা রয়েছে:

  • a:link - সাধারণ, ভিজিট করা হয়নি এমন লিঙ্ক
  • a:visited - যে লিঙ্ক এ ভিজিটর ভিজিট করেছেন
  • a:hover - যে লিঙ্ক এর উপর ব্যবহারকারী মাউস রেখেছেন
  • a:active - ক্লিক করার মূহুর্তে লিঙ্ক এর অবস্থা

উদাহরণঃ


/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

 

লিঙ্ক এর বিভিন্ন অবস্থা স্টাইল করার ক্ষেত্রে ক্রমের কিছু নিয়ম রয়েছে:

  • a:hover অবশ্যই a:link এবং a:visited এর পরে আসতে হবে
  • a:active অবশ্যিই a:hover এর পরে আসতে হবে

 

প্রচলিত লিঙ্ক স্টাইল

উপরের উদাহরণে লিঙ্ক এর রঙ লিঙ্ক এর অবস্থার উপর ভিত্তি করে পরিবর্তিত হয়।

লিঙ্ক স্টাইল করার ক্ষেত্রে অন্যান্য প্রচলিত পন্থাগুলো দেখা যাক:

 

টেক্সট ডাইরেকশন

text-decoration প্রোপার্টি বেশিরভাগ ক্ষেত্রে লিঙ্ক এর আন্ডারলাইন মুছে ফেলতে ব্যবহার করা হয়:


a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

 

ব্যাকগ্রাউন্ড রঙ

background-color প্রোপার্টি ব্যাকগ্রাউন্ড এর এর রঙ নির্ধারণ করতে ব্যবহৃত হয়:


a:link {
    background-color: #B2FF99;
}

a:visited {
    background-color: #FFFF85;
}

a:hover {
    background-color: #FF704D;
}

a:active {
    background-color: #FF704D;
}

 

নিজে নিজে চেষ্টা করুন

অনুশীলন ০১ঃ

লিঙ্ক এর রঙ সবুজ হিসেবে নির্ধারণ করুন


<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p><a href="http://www.w3schools.com">W3Schools.com</a></p>

</body>
</html>

 

অনুশীলন ০২ঃ

ভিজিট করা হয়নি এমন অবস্থায় লিঙ্ক এর রঙ লাল এবং ভিজিট করার পর লিঙ্ক এর রঙ নীল হিসেবে নির্ধারণ করুন।


<!DOCTYPE html>
<html>
<head>
<style>
/* mouse over link */
a:hover {
    color: black;
}

/* selected link */
a:active {
    color: green;
}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p><a href="http://www.w3schools.com">W3Schools.com</a></p>

</body>
</html>

 

অনুলীলন ০৩ঃ

hover এবং active লিঙ্ক অবস্থার ক্ষেত্রে ভিজিটেড এবং আনভিজিটেড লিঙ্ক হতে আন্ডারলাইন মুছে দিন


<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
    
}

/* visited link */
a:visited {
    
}

/* mouse over link */
a:hover {
    
}

/* selected link */
a:active {
    
}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p><a href="http://www.w3schools.com">W3Schools.com</a></p>

</body>
</html>

 

অনুশীলন ০৪ঃ

ভিজিটেড এবং আনভিজিটেড লিঙ্ক এর জন্য ব্যাকগ্রাউন্ড রঙ "lightblue" নির্ধারণ করুন এবং hover এবং active লিঙ্ক অবস্থার ক্ষেত্রে ব্যাকগ্রাউন্ড রঙ হলুদ হিসেবে নির্ধারণ করুন


<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
    
}

/* visited link */
a:visited {
    
}

/* mouse over link */
a:hover {
    
}

/* selected link */
a:active {
    
}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p><a href="http://www.w3schools.com">W3Schools.com</a></p>

</body>
</html>