Wednesday, March 27, 2019

HTML টিউটোরিয়াল পর্ব- ২৬ ---- HTML হেড কি....



যা জানবো...

হেড ট্যাগ বা <head> এবং হেড ইলিমেন্ট যেকোন HTML পেজের একটি গুরুত্বপূর্ণ অংশ। এর মাধ্যমে ব্রাউজারে পেজ সম্পর্কিত বেশ কিছু তথ্য প্রদর্শন করার পাশাপাশি সার্চ ইন্জিন অপটিমাইজেশন এর মত গুরুত্বপূর্ণ কাজও সম্পন্ন হয়।এখান থেকে আমরা হেড ট্যাগ বা <head> এবং হেড ইলিমেন্ট সম্পর্কে বিস্তারিত জানতে পারব।


হেড ইলিমেন্ট


হেড ট্যাগ বা <head> এবং হেড ইলিমেন্ট যেকোন HTML পেজের একটি গুরুত্বপূর্ণ অংশ। কারণ <head>….</head> এর মধ্যে অর্থাৎ হেড ইলিমেন্ট হিসেবে <title> <link> <meta> <style> <script>    এ সকল গুরুত্বপূর্ণ ট্যাগ সমূহ রাখা হয়। এগুলোর মাধ্যমে ব্রাউজারে পেজ সম্পর্কিত বেশ কিছু তথ্য প্রদর্শন করার পাশাপাশি সার্চ ইন্জিন অপটিমাইজেশন এর মত গুরুত্বপূর্ণ কাজও সম্পন্ন হয়।




টাইটেল

ব্রাউজারের টাইটেল বারে পেজের টাইটেল প্রদর্শনের জন্য <title> </title> ট্যাগ ব্যবহার করা হয়।
<title>আমাদের HTML টিউটোরিয়াল সমূহ</title>
উপরের কোড এর মাধ্যমে ব্রাউজারের টাইটেল বারে “আমাদের HTML টিউটোরিয়াল সমূহ” লেখাটি দেখা যাবে।

লিংক

CSS স্টাইল সিট এর সাথে লিংক করার জন্য <link> </link> ব্যবহার করা হয়।
<link rel="stylesheet" type="text/css" href="styles.css" />

মেটা ইলিমেন্ট

মেটা সার্চ ইন্জিন অপটিমাইজেশনের জন্য গুরুত্বপূর্ণ কাজ করে থাকে। বিষয়টি পববর্তী লেখায় বিস্তারিত আলোচনা করা হবে।

স্টাইল

ইনটার্নাল স্টাইল সিট ব্যবহারের জন্য <style></style> ট্যাগ ব্যবহার করা হয়। যেমন

<head>
<style type="text/css">
body {background-color: red;}
p { margin-left: 20px;
    font-weight: bold;
    color: #006; }
</style>
</head>


স্ক্রিপ্ট

জাভাস্ক্রিপ্ট, জে কোয়েরী ইত্যাদি স্ক্রিপ্ট যুক্ত করার জন্য <script> </script> ট্যাগ ব্যবহার করা হয়। যেমন

                         <script type="text/javascript" src="jquery.js"></script>
                        <script type="text/javascript" src="sliding_effect.js"></script>  

উদাহরণ প্রোগ্রাম

নিচের লিংক থেকে সোর্স ফাইল ডাউনলোড করে Extract করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।এবং ব্রাউজারের টাইটেল বারে “আমাদের HTML টিউটোরিয়াল সমূহ” লেখাটি দেখা যাবে।

সোর্স ফাইল ডাউনলোড



Previous Post
Next Post

post written by:

0 comments: