এক্সএইচটিএমএল (XHTML) ডকুমেন্টে ফেভিকন (favicon) এবং অন্যান্য রিসোর্স (যেমন CSS, JavaScript, ইমেজ) লিঙ্ক করা ওয়েব ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ। এক্সএইচটিএমএল ডকুমেন্টে ফেভিকন এবং রিসোর্স লিঙ্কিং সঠিকভাবে করা হলে তা ওয়েব পেজের লোডিং স্পিড এবং ইউজার এক্সপিরিয়েন্স উন্নত করতে সহায়তা করে।
১. ফেভিকন (Favicon) সেটআপ
১.1 ফেভিকন কি?
ফেভিকন (favicon) হল একটি ছোট আকারের আইকন যা ওয়েবসাইটের ব্রাউজার ট্যাবে প্রদর্শিত হয়। এটি ওয়েবসাইটের পরিচিতি বাড়াতে সহায়তা করে এবং ব্যবহারকারীদের জন্য দ্রুত সনাক্তযোগ্য করে তোলে। সাধারণত, ফেভিকনটি .ico ফরম্যাটে থাকে, তবে এটি .png, .jpg, বা .svg ফরম্যাটেও ব্যবহার করা যেতে পারে।
১.2 XHTML ডকুমেন্টে ফেভিকন লিঙ্ক করা
একটি ফেভিকন লিঙ্ক করতে, এটি <head> ট্যাগের মধ্যে <link> ট্যাগের মাধ্যমে যুক্ত করা হয়। নিচে একটি উদাহরণ দেওয়া হলো:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<!-- Favicon Link -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a sample webpage with a favicon.</p>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
<link rel="icon" type="image/x-icon" href="favicon.ico" />এই ট্যাগটি ব্রাউজারকে জানায় যে ওয়েবসাইটের ফেভিকন হলোfavicon.icoফাইলটি।type="image/x-icon"এটিতে ফেভিকনের ফাইল টাইপ দেওয়া হয়েছে (যেমন.ico,.pngইত্যাদি)।href="favicon.ico"এটি ফেভিকনের ফাইলের লোকেশন নির্দেশ করে। সাধারণত, ফেভিকনটি ওয়েবসাইটের রুট ডিরেক্টরিতে থাকে।
১.3 ফেভিকনের অন্য ফরম্যাট (যেমন PNG)
ফেভিকন PNG ফরম্যাটে ব্যবহার করার জন্যও একইভাবে <link> ট্যাগ ব্যবহার করা হয়। উদাহরণস্বরূপ:
<link rel="icon" type="image/png" href="favicon.png" />
২. রিসোর্স লিঙ্কিং
XHTML ডকুমেন্টে বিভিন্ন রিসোর্স যেমন CSS, JavaScript, এবং ইমেজ ফাইল লিঙ্ক করা হয়। এগুলো ব্রাউজারের মাধ্যমে ওয়েব পেজের উপস্থাপন এবং কার্যকারিতা উন্নত করে। নিচে CSS এবং JavaScript ফাইলের উদাহরণ দেওয়া হলো।
২.1 CSS ফাইল লিঙ্ক করা
XHTML ডকুমেন্টে এক্সটার্নাল CSS ফাইল লিঙ্ক করার জন্য <link> ট্যাগ ব্যবহার করা হয়। CSS ফাইলের লিঙ্কে অবশ্যই rel="stylesheet" এবং type="text/css" অ্যাট্রিবিউট থাকতে হবে।
<head>
<meta charset="UTF-8" />
<title>My Styled Page</title>
<!-- External CSS File -->
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
ব্যাখ্যা:
rel="stylesheet": এটি ব্রাউজারকে জানায় যে লিঙ্কটি একটি স্টাইলশীট (CSS) ফাইল।type="text/css": CSS ফাইলের টাইপ নির্দেশ করে।href="styles.css": এটি সেই ফাইলের লোকেশন, যেটি ওয়েব পেজটির স্টাইল নির্ধারণ করবে।
২.2 JavaScript ফাইল লিঙ্ক করা
JavaScript ফাইল লিঙ্ক করার জন্য <script> ট্যাগ ব্যবহার করা হয়। এক্সটার্নাল JavaScript ফাইলের জন্য src অ্যাট্রিবিউট ব্যবহার করা হয়।
<head>
<meta charset="UTF-8" />
<title>My Web Page with JavaScript</title>
<!-- External JavaScript File -->
<script type="text/javascript" src="script.js"></script>
</head>
ব্যাখ্যা:
type="text/javascript": এটি JavaScript ফাইলের টাইপ নির্দেশ করে।src="script.js": এখানে ফাইলের লোকেশন নির্দেশ করা হয়েছে, যেখানে JavaScript কোড লেখা আছে।
২.3 ইমেজ ফাইল লিঙ্ক করা
ইমেজ ফাইলগুলি HTML <img> ট্যাগের মাধ্যমে ওয়েব পেজে যোগ করা হয়। XHTML-এ, src এবং alt অ্যাট্রিবিউট ব্যবহার করা আবশ্যক।
<body>
<h1>Welcome to My Website</h1>
<!-- Image Linking -->
<img src="image.jpg" alt="Sample Image" />
</body>
ব্যাখ্যা:
src="image.jpg": এটি ইমেজ ফাইলের লোকেশন নির্দেশ করে।alt="Sample Image": এটি ইমেজটির বিকল্প টেক্সট প্রদান করে, যা ইমেজটি লোড না হলে প্রদর্শিত হবে।
XHTML ডকুমেন্টে ফেভিকন এবং রিসোর্স লিঙ্কিং ওয়েবসাইটের ইউজার এক্সপিরিয়েন্স এবং ফাংশনালিটি উন্নত করতে সহায়তা করে। ফেভিকন ওয়েবসাইটের চেহারা বাড়ায় এবং রিসোর্স লিঙ্কিং (CSS, JavaScript, ইমেজ) পেজের স্টাইল এবং কার্যকারিতা বজায় রাখতে সহায়ক। সঠিকভাবে ফেভিকন এবং অন্যান্য রিসোর্স লিঙ্ক করা হলে, আপনার ওয়েবসাইট আরও প্রফেশনাল এবং দ্রুত লোডযোগ্য হবে।
Read more
