কিভাবে HTML <head> ব্যবহার করতে হয় তা জানুন আপনার ওয়েবসাইটে উপাদান।
HTML <head> উপাদান হল আপনার ওয়েব পৃষ্ঠাগুলি সম্পর্কে মেটাডেটা (তথ্য) জন্য একটি ধারক, যেমন পৃষ্ঠার শিরোনাম, শৈলী এবং স্ক্রিপ্ট৷
<head> এর ভিতরের বিষয়বস্তু উপাদান হল প্রাথমিকভাবে আপনার সাইটের দর্শকদের দ্বারা নয়, মেশিন দ্বারা পড়া এবং প্রক্রিয়া করা (যেমন একটি ব্রাউজার)৷
<head> উপাদানটিকে <header> এর সাথে বিভ্রান্ত করা উচিত নয় উপাদান, যা একটি ভিন্ন উদ্দেশ্য পরিবেশন করে।
<head> উপাদানটি খোলার <html> নীচে রাখা হয় ট্যাগ, এবং ঠিক <body> খোলার আগে ট্যাগ:
<!DOCTYPE html>
<html>
<head>
<!-- Contains Metadata primarily for machine processing -->
</head>
<body></body>
</html>
নিম্নলিখিত HTML উপাদানগুলি <head> এর ভিতরে রাখা যেতে পারে উপাদান:
</li> <li><link></li> <li><style></li> <li><code><meta></code> </li> <li><script></li> <li><code><base></code> </li> <li><noscript></li> </ul> <h2 id="examples" style="position:relative;">উদাহরণ</h2> <p> কিভাবে <code><head></code> ব্যবহার করতে হয় তার কয়েকটি উদাহরণ দেখি ভিতরে কিছু সাধারণভাবে ব্যবহৃত মেটাডেটা উপাদান সহ উপাদান।</P> <h3 id="the-title-element" style="position:relative;">The <title> উপাদান</h3> <p> <code><title></code> উপাদান আপনার HTML নথির শিরোনাম সংজ্ঞায়িত করে, যা ব্রাউজার পৃষ্ঠা ট্যাবে প্রদর্শিত হয়:</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> </head> <body></body> </html></code></pre> <p> আপনি যদি আপনার মাউসকে যেকোনো ওয়েবসাইটের পৃষ্ঠা ট্যাবের উপর নিয়ে যান এবং এটিকে কয়েক সেকেন্ডের জন্য ধরে রাখেন, তাহলে আপনি পুরো পৃষ্ঠার শিরোনাম প্রদর্শন করে একটি ছোট পপআপ পাবেন।</P> <h3 id="the-style-element" style="position:relative;">The <style> উপাদান</h3> <p> <code><style></code> উপাদানটিতে আপনার HTML নথির স্টাইলিং তথ্য রয়েছে (টাইপোগ্রাফি, স্পেসিং, রঙ, অ্যানিমেশন, ইত্যাদি) CSS এ লেখা:</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> <style type="text/css"> body { background-color: red; } p { font-size: 18px; line-height: 1.5; } </style> </head> <body></body> </html></code></pre> <h3 id="the-link-element" style="position:relative;"> <link> উপাদান</h3> <p> HTML নথিতে শৈলী প্রয়োগের আরও আধুনিক উপায় হল <code><link></code> সহ বাহ্যিক CSS স্টাইল শীট আমদানি করা। উপাদান:</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> <link href="/styles/main.css" rel="stylesheet" /> </head> <body></body> </html></code></pre> <p> জেনে রাখা ভালো:যদি আপনি <code><style></code> উভয়ই ব্যবহার করেন এবং <code><link></code> একই নথিতে উপাদান, শৈলীগুলি আপনার নথিতে অন্তর্ভুক্ত করার ক্রমে প্রয়োগ করা হবে। CSS ক্যাসকেড, তাই যা কিছু শেষ আসে (উপর থেকে নীচে) আগের শৈলীগুলিকে ওভাররাইড করবে, যদি তারা একই HTML উপাদানগুলিকে সম্বোধন করে।</P> <h3 id="the-script-element" style="position:relative;"><script> উপাদান</h3> <p> <code><script></code> উপাদান দুটি ভিন্ন উপায়ে জাভাস্ক্রিপ্ট চালানোর জন্য ব্যবহৃত হয়:</P> <ol> <li>জাভাস্ক্রিপ্ট কোড সরাসরি আপনার নথিতে এম্বেড করে (যেমন আপনি <code><style></code> দিয়ে দেখেছেন উপাদান)।</li> <li> <code>src</code> এর মাধ্যমে বাহ্যিক জাভাস্ক্রিপ্ট স্ক্রিপ্ট ফাইল আমদানি করে বৈশিষ্ট্য।</li> </ol> <p> সরাসরি আপনার নথিতে জাভাস্ক্রিপ্ট কোড এম্বেড করুন:</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> <script> // Make background color red document.body.style.backgroundColor = "red" </script> </head> <body></body> </html></code></pre> <p> একটি বাহ্যিক জাভাস্ক্রিপ্ট ফাইল আমদানি করুন:</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> <script src="/scripts/main.js"></script> </head> <body></body> </html></code></pre> <br> </article> <div class="ad5"> <script language='javascript' src='https://bd.wsxdn.com/css/ad/bd2.js'></script> </div> <section id="turn-page" class="t-over"> <div class="f-start f-align"> <i><img src="https://bd.wsxdn.com/css/img/sanjiao.svg" alt=""></i> <a class='LinkPrevArticle' href='https://bd.wsxdn.com/ge064y/hf651z/202203/1006054549.html' >কিভাবে এইচটিএমএল অক্ষর এস্কেপ </a> </div> <div class="f-start f-align"> <i><img src="https://bd.wsxdn.com/css/img/sanjiao.svg" alt=""></i> <a class='LinkNextArticle' href='https://bd.wsxdn.com/ge064y/hf651z/202203/1006054551.html' >কিভাবে HTML <script> এলিমেন্ট ব্যবহার করবেন </a> </div> </section> </div> <aside class="box-r"> <section class="box42"> <ol> <li> <a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054537.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="কিভাবে HTML <figcaption> এলিমেন্ট ব্যবহার করবেন ">কিভাবে HTML <figcaption> এলিমেন্ট ব্যবহার করবেন </p> </a> </li> <li> <a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054539.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="এইচটিএমএল ডিফার অ্যাট্রিবিউট কীভাবে ব্যবহার করবেন ">এইচটিএমএল ডিফার অ্যাট্রিবিউট কীভাবে ব্যবহার করবেন </p> </a> </li> <li> <a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054540.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="কিভাবে HTML টার্গেট অ্যাট্রিবিউট ব্যবহার করবেন ">কিভাবে HTML টার্গেট অ্যাট্রিবিউট ব্যবহার করবেন </p> </a> </li> <li> <a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054542.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="কিভাবে HTML <meta> এলিমেন্ট ব্যবহার করবেন ">কিভাবে HTML <meta> এলিমেন্ট ব্যবহার করবেন </p> </a> </li> <li> <a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054545.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="কিভাবে HTML তালিকা ব্যবহার করবেন (<ul>, <ol>, <dl>) ">কিভাবে HTML তালিকা ব্যবহার করবেন (<ul>, <ol>, <dl>) </p> </a> </li> <li> <a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054546.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="কিভাবে HTML এলিমেন্ট ব্যবহার করবেন ">কিভাবে HTML এলিমেন্ট ব্যবহার করবেন </p> </a> </li> <li> <a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054551.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="কিভাবে HTML <script> এলিমেন্ট ব্যবহার করবেন ">কিভাবে HTML <script> এলিমেন্ট ব্যবহার করবেন </p> </a> </li> <li> <a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054552.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="কিভাবে HTML <style> এলিমেন্ট ব্যবহার করবেন ">কিভাবে HTML <style> এলিমেন্ট ব্যবহার করবেন </p> </a> </li> <li> <a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054554.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="কিভাবে HTML <link> এলিমেন্ট ব্যবহার করবেন ">কিভাবে HTML <link> এলিমেন্ট ব্যবহার করবেন </p> </a> </li> <li> <a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054555.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="কিভাবে HTML <span> এলিমেন্ট ব্যবহার করবেন ">কিভাবে HTML <span> এলিমেন্ট ব্যবহার করবেন </p> </a> </li> </ol> </section> </aside> </section> </section> <section class="box13 content box44"> <ol class="f-between"> <li class="ibox"> <a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054544.html" class="i-text"> <p class="r-over r-over-2">কিভাবে HTML <noscript> এলিমেন্ট ব্যবহার করবেন </p> </a> </li> <li class="ibox"> <a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054553.html" class="i-text"> <p class="r-over r-over-2">কিভাবে HTML <title> এলিমেন্ট ব্যবহার করবেন </p> </a> </li> <li class="ibox"> <a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006063875.html" class="i-text"> <p class="r-over r-over-2">কিভাবে HTML এ প্রয়োজনীয় বৈশিষ্ট্য ব্যবহার করবেন? </p> </a> </li> <li class="ibox"> <a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006064182.html" class="i-text"> <p class="r-over r-over-2">কিভাবে HTML এ উপাদানের মান যোগ করবেন? </p> </a> </li> </ol> </section> <ul class="types box23 content f-start"> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/ca644u/' target="_self">C প্রোগ্রামিং</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/mk645f/' target="_self">C++</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/hf646z/' target="_self">Redis</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/fd647x/' target="_self">BASH প্রোগ্রামিং</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/db648w/' target="_self">Python</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/vs649n/' target="_self">Java</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/tr650l/' target="_self">তথ্যশালা</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/hf651z/' target="_self">HTML</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/mj652e/' target="_self">JavaScript</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/ki653c/' target="_self">প্রোগ্রামিং</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/bz654t/' target="_self">CSS</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/zx655s/' target="_self">Ruby</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/nl656f/' target="_self">SQL</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/sq657k/' target="_self">IOS</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/qo658j/' target="_self">Android</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/vt659n/' target="_self">mongodb</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/us660m/' target="_self">MySQL</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/by661t/' target="_self">C#</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/mk665e/' target="_self">PHP</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/he671z/' target="_self">SQL সার্ভার</a></li> </ul> <footer> <section class="msg f-center content"> <span class="f-start"> কপিরাইট © <a href="https://bd.wsxdn.com">https://bd.wsxdn.com</a> সমস্ত অধিকার সংরক্ষিত </span> </section> </footer> </body> </html>