এইচটিএমএল সিএসএস বুটস্ট্রাপ জাভাস্ক্রিপ্ট জেকুয়েরি
লগইন
×

এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল হোম পেজ এইচটিএমএল পরিচিতি এবং গঠন এইচটিএমএল কোড এটিটর এইচটিএমএলের মৌলিক ধারণা এইচটিএমএল এলিমেন্ট এইচটিএমএল emty এলিমেন্ট এইচটিএমএল এট্রিবিউট এইচটিএমএল class এট্রিবিউট এইচটিএমএল style এট্রিবিউট এইচটিএমএল কমেন্ট এইচটিএমএল হেডিং এইচটিএমএল প্যারাগ্রাফ এইচটিএমএল টেক্সট ফরম্যাট এইচটিএমএল টেক্সট কোটেশন এইচটিএমএল কম্পিউটারকোড এইচটিএমএল টেবিল এইচটিএমএল লিস্ট এইচটিএমএল কালার এইচটিএমএল সিএসএস এইচটিএমএল লিংক এইচটিএমএল ইমেজ এইচটিএমএল ব্লক-ইনলাইন এলিমেন্ট এইচটিএমএল হেড এইচটিএমএল লেআউট এইচটিএমএল আইফ্রেম এইচটিএমএল জাভাস্ক্রিপ্ট এইচটিএমএল রেস্পন্সিভ এইচটিএমএল এনটিটি এইচটিএমএল অক্ষরসেট এইচটিএমএল সিম্বল এইচটিএমএল URL এনকোড এইচটিএমএল-XHTML px - em কনভার্শন

এইচটিএমএল ফর্ম

এইচটিএমএল ফর্ম এইচটিএমএল ফর্ম এলিমেন্ট এইচটিএমএল ইনপুট টাইপ এইচটিএমএল(৫) ইনপুট টাইপ এইচটিএমএল ইনপুট এট্রিবিউট

এইচটিএমএল৫

এইচটিএমএল৫ পরিচিতি ব্রাউজার সাপোর্ট এইচটিএমএল৫ এলিমেন্ট এইচটিএমএল৫ সিম্যান্টিক এলিমেন্ট এইচটিএমএল৫ মাইগ্রেশন এইচটিএমএল৫ স্টাইল গাইড

এইচটিএমএল মিডিয়া

মিডিয়া-Media ভিডিও-Video অডিও-Audio প্লাগ-ইন-PlugIn ইউটিউব-Youtube

এইচটিএমএল এপিআই

জিওলোকেশন-Geolocation ড্রাগ/ড্রপ-Drag/Drop লোকাল স্টোরেজ-LocalStorage অ্যাপ ক্যাশ-AppCache ওয়েব ওয়ার্কার-WebWorker এসএসই-SSE

এইচটিএমএল রেফারেন্স

রেফারেন্স- reference

 

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


এক নজরে এইচটিএমএল লিংক ট্যাগ

ট্যাগ বিবরণ
<a> হাইপারলিংক(hyperlink) তৈরি করার জন্য <a> ট্যাগ ব্যবহার হয়।

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


এইচটিএমএল Hyperlink তৈরি

এইচটিএমএলে লিংক হলো হাইপারলিংক (Hyperlink)।

লিংকের মধ্যে ক্লিক করে আপনি খুব সহজেই অন্য ডকুমেন্টে চলে যেতে পারেন। লিংক একটি ডকুমেন্টের সাথে অন্য আরেকটি ডকুমেন্টের সম্পর্ক তৈরি করে।

নোটঃ একটি লিংক যে শুধুমাত্র টেক্সট বা লেখাই হবে তা কিন্তু না। এটি ইমেজ বা অন্য যেকোন এইচটিএমএল এলিমেন্টও হতে পারে। লিংক হিসেবে ইমেজ বা অন্য যেকোন এইচটিএমএল এলিমেন্ট ব্যবহার করলেও এটি লিংকের ডিফল্ট আচরণই অনুসরণ করবে।


সিন্টেক্স

<a href="url">Link</a>

href এট্রিবিউটে URL এর মাধ্যমে লিংকের অ্যাড্রেস নির্ধারণ করা হয়। যেমনঃ https://www.sattacademy.com

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল লিংক</title>
</head>
<body>
	<p><a href="https://www.sattacademy.com">স্যাট একাডেমী</a></p>
</body>
</html>

ফলাফল

উপরের উদাহরণে আমরা দেখতে পাচ্ছি যে, শুধুমাত্র <a> এবং </a> এর মাঝের টেক্সটগুলো(স্যাট একাডেমী) ব্রাউজারের মধ্যে লিংক হিসেবে প্রদর্শিত হয়েছে।

লিংক হিসেবে যেই লেখাটি প্রদর্শিত হবে সেটির উপর ক্লিক করলে আপনাকে লিংকের নির্দিষ্ট অ্যাড্রেস/গন্তব্যে নিয়ে যাবে।


লোকাল লিংক

উপরের উদাহরণে আমরা যে URL টি ব্যবহার করেছি সেটি একটি সম্পূর্ণ URL । অর্থাৎ এটি ছিল একটি ওয়েব সাইটের সম্পূর্ণ অ্যাড্রেস।

লোকাল লিংক বলতে একই ওয়েবসাইটে অবস্থিত যেকোন লিংককে বুঝায়। লোকাল লিংক তৈরি করার ক্ষেত্রে http://www..... ব্যবহার করতে হয় না। শুধুমাত্র লিংক ফাইলের নাম এবং ডিরেক্টরি নির্ধারণ করে দিলেই হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<p><a href="../html-image-tag.php">এইচটিএমএল ইমেজ</a> পেজে যেতে এখানে ক্লিক করুন।</p>
</body>
</html>

ফলাফল


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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<a href="../index.php">
	<img src="../satt.png" alt="HTML tutorial" style="width:142px;height:142px;border:0">
	</a>
</body>
</html>

ফলাফল


এইচটিএমএল লিংক - বুকমার্ক(Bookmark) তৈরি

একটি ওয়েব পেজের নির্দিষ্ট অংশে যাওয়ার জন্য এইচটিএমএল বুকমার্ক(Bookmark) ব্যবহার করা হয়।

আপনাকে প্রথমে বুকমার্কটি তৈরি করতে হবে, তারপর তাতে লিংক যোগ করতে হবে।

যখন লিংকে ক্লিক করা হবে, তখন পেজটি স্ক্রল হয়ে বুকমার্কে চলে যাবে।

উদাহরণ

<h4 id="chap4">অধ্যায় ৪</h4>
<a href="#chap4">অধ্যায় ৪ এ যেতে ক্লিক করুন</a>

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<p><a href="#chap4">অধ্যায় ৪ এ যেতে ক্লিক করুন</a></p>

	<h4>অধ্যায় ১</h4>
	<p>আশা করি এইচটিএমএল বুকমার্ক বিষয়টি ভালো ভাবে বুঝতে পেরেছেন।</p>

	<h4>অধ্যায় ২</h4>
	<p>আশা করি এইচটিএমএল বুকমার্ক বিষয়টি ভালো ভাবে বুঝতে পেরেছেন</p>

	<h4>অধ্যায় ৩</h4>
	<p>আশা করি এইচটিএমএল বুকমার্ক বিষয়টি ভালো ভাবে বুঝতে পেরেছেন।</p>

	<h4 id="chap4">অধ্যায় ৪</h4>
	<p>আশা করি এইচটিএমএল বুকমার্ক বিষয়টি ভালো ভাবে বুঝতে পেরেছেন।</p>

	<h4>অধ্যায় ৫</h4>
	<p>আশা করি এইচটিএমএল বুকমার্ক বিষয়টি ভালো ভাবে বুঝতে পেরেছেন।</p>

	<h4>অধ্যায় ৬</h4>
	<p>আশা করি এইচটিএমএল বুকমার্ক বিষয়টি ভালো ভাবে বুঝতে পেরেছেন।</p>
</body>
</html>

ফলাফল


অধ্যায় সারাংশ