X

X

X

HTML হেড : মেটাডাটা কন্টেইনার (Meta Data Container)


HTML <head> ইলামেন্ট

<head> ইলামেন্ট ডকুমেন্টেরে মেটাডাটা ধারণ করার জন্য ব্যবহৃত হয়। এটি <html> tag এবং <body> ইলামেন্টের মাঝামাঝি জায়গায় লেখা হয়। এর ভেতরের কন্টেন্ট দেখা যায় না। কিন্তু HTML ডকুমেন্টের গুরুত্বপূর্ণ তথ্যসমূহ এখানে থাকে।

মনে রাখাবনে মেটাডাটা কখনই দৃশ্যমান নয়। মেটাডাটা বলতে সাধারণত document title, character set, styles, links, scripts, এবং অন্যান্য meta information কে বোঝায়।

নিচের ট্যাগগুলো দ্বারা মেটাডাটা উপস্থাপণ করা হয়:
<title>, <style>, <meta>, <link>, <script>, and <base>.


HTML <title> ইলামেন্ট

<title> ইলামেন্ট দ্বারা ডকুমেন্টের টাইটেল বা শিরোনাম লিখা হয়। কোনো ওয়েবপেজ ওপেন করার পর ট্যাবের যে শিরোনাম উপস্থাপিত হয়, সেটাই মূলত ডকুমেন্টের শিরোনাম বা title । ডকুমেন্ট টাইটেল উল্লেখ্য না করলেও পেজ সঠিকভাবে রান হয়, কিন্তু একটি আদর্শমানের ওয়েবপেজের সবসময় title উল্লেখ্য করা উচিৎ।

<title> ইলামেন্ট:

  • ব্রাউজার ট্যাবের টাইটেল নির্দেশ করে।
  • ফেভারিট লিস্টে যোগ করার সময় কোনো ওয়েব পেজ বা লিংকের টাইটেল নির্দেশ করে।
  • সার্চ ইঞ্জিন রেজাল্টে টাইটেল নির্দেশ করে।

নিচে একটি সাধারণ ওয়েব পেজের উদাহরণ দেওয়া হলো।

Code Example

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>

<p>The content of the body element is displayed in the browser window.</p>
<p>The content of the title element is displayed in the browser tab, in favorites and in search engine results.</p>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML <style> ইলামেন্ট

<style> ইলামেন্ট ওয়েব পেজের স্টাইল বর্ণনা করার জন্য ব্যবহৃত হয়। এটি দ্বারা মূলত internal CSS কোড লিখা হয়। একটি ওয়েবপেজে একাধিক style ইলামেন্ট থাকতে পারে। আবার নাও থাকতে পারে। সাধারণত অধিকাংশ ক্ষেত্রে style ইলামেন্টকে HTML document এর হেড সেকশনে লিখা হয়। তবে প্রয়োজন অনুসারে ডকুমেন্টের যেকোনো জায়গায় লিখা যেতে পারে।

মনে রাখবেন, পরে লিখা কোডের প্রায়োরিটি আগে লিখা কোডের চাইতে বেশি।

Code Example

 <style>
    body {background-color: powderblue;}
    h1 {color: red;}    
    p {color: blue;}
  </style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML <link> ইলামেন্ট

বাহ্যিক স্টাইলশিট কে লিংক করার জন্য <link>  ইলামেন্ট ব্যবহৃত হয়।

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML <meta> ‌ইলামেন্ট

<meta> ইলামেন্ট সাধারণত ব্যবহার করা হয় পেজের ক্যারেক্টার কোড, বর্ণনা, কিওয়ার্ড, অথার এবং অন্যন্য মেটা তথ্য প্রকাশ করার জন্য। মেটাডাটা ব্যবহৃত হয় ব্রাউজার , সার্চ ইঞ্জিন এবং অন্যান্য আরও অনেক ওয়েব সার্ভিস দ্বারা।

পেজের ক্যারেক্টার সেট বর্ণনা:

<meta charset=”UTF-8″>

ওয়েব পেজের বর্ণনা:

<meta name=”description” content=”Free Web tutorials”>

সার্চ ইঞ্জিনের জন্য কিওয়ার্ড বর্ণনা:

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

ওয়েব পেজের লেখক বর্ণনা:

<meta name=”author” content=”John Doe”>

প্রতি ৩০ সেকেন্ড অন্তর পেজ রিফ্রেশ করা:

<meta http-equiv=”refresh” content=”30″>

<meta> ট্যাগের উদাহরণ:

Code Example

 <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="John Doe">

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


ভিউপোর্ট সেট করা

<meta> tag ব্যবহার করে ব্রাউজার সমূহের ভিউপোর্ট সাইজ সেট করা যায়। ভিউপোর্ট হচ্ছে ওয়েব পেজের দৃশ্যমান এরিয়া। এটি সাধারণত ডিভাইসভেদে ভিন্ন ভিন্ন হয়।

প্রতিটি ওয়েব পেজে <meta> ভিউপোর্ট ইলামেন্ট সেট করে দেওয়া প্রয়োজন।

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

ভিউপোর্ট মেটা ট্যাগের মাধ্যমে ব্রাউজার কে নির্দেশনা দেওয়া হয়, এটি কিভাবে একটি ওয়েব পেজের ডাইমেনশন এবং স্কেলিং নিয়ন্ত্রণ করবে। width=device-width অংশটি পেজের প্রস্থ নির্ধারণ করে ।

initial-scale=1.0 এর মাধ্যমে ব্রাউজারকে জুম লেভেল স্কেলিং করার নির্দেশনা দেওয়া হয়। 1.0 হচ্ছে স্বাভাবিক জুম লেভেল। অর্থাৎ, এটি দ্বারা কোনো জুম করা বোঝায় না।

নিচে ভিউপোর্ট সহ এবং ভিউপোর্ট ট্যাগ ছাড়া একটি ওয়েব পেজের উদাহরণ দেওয়া হলো।

টিপস:  যদি আপনি এই পেজটি কোনো ট্যাব বা ফোন দিয়ে ব্রাউজ করছেন তবে নিচের লিংক দুটিতে ক্লিক করে পার্থক্য দেখতে পারেন।

HTML <script> ইলামেন্ট

<script> ‌ইলামেন্ট দিয়ে ক্লায়েন্ট সাইড জাভাস্ক্রিপ্ট কোড লিখা হয়।

নিচের উদাহরণে দেখানো হয়েছে কিভাবে জাভাস্ক্রিপ্ট দিয়ে id=”demo” বিশিষ্ট একটি ইলামেন্টে “Hello JavaScript!” লিখা হয়:

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML <base> ইলামেন্ট

<base> ইলামেন্ট দিয়ে একটি ওয়েব পেজের বেস লিংক সেট করা হয়। একটি ওয়েব পেজে অনেক বাহ্যিক লিংক ব্যবহার করা হয়। এদের মধ্যে অনেক লিংক রিলেটিভ লিংক । যদি বেস ইলামেন্ট বর্ণনা করা না থাকে তবে রিলেটিভ লিংকগুলো পেজের লিংকটিকে রেফারেন্স লিংক হিসেবে বিবেচনা করে। কিন্তু যদি বেস ইলামেন্ট বর্ণনা করা থাকে তবে সেটি রেফারেন্স লিংক হিসেবে কাজ করে।

Code Example

<base href="http://www.seicoder.com/resources/html/images/" target="_blank">

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


<html>, <head> and <body> বাদ দিয়ে পেজ বর্ণনা?

HTML5 standard; অনুযায়ী the <html>, the <body>, এবং <head> না লিখেও ওয়েব পেজ তৈরি করা যায়।

নিচের কোডটি একটি valid HTML5 কোড:

Code Example

<!DOCTYPE html>
<title>Page Title</title>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নোট :

SEI Coder এর পক্ষথেকে আমরা <html> and <body> ট্যাগসমূহ ছাড়া ওয়েব পেজ তৈরি না করার পরামর্শ দিচ্ছি। কেননা এতে পুরোনো ব্রাউজারে অনাকাংখিত ভুল হতে পারে।


HTML head ইলামেন্ট সমূহ

ট্যাগ বর্ণনা
<head> ডকুমেন্টের মেটাডাটা ধারণ করে।
<title> ডকুমেন্টের শিরোনাম লিখা হয়।
<base> বেস লিংক লিখা হয়।
<link> Defines the relationship between a document and an external resource
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document