নথি কাঠামো

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

MachineLearningWorkshop.com (MLW) সাইটটি তৈরি করার জন্য, প্রথমে সেই উপাদানগুলো অন্তর্ভুক্ত করুন যা প্রতিটি ওয়েব পেজের জন্য অপরিহার্য বলে বিবেচিত হওয়া উচিত: ডকুমেন্টের ধরন, বিষয়বস্তুর সহজবোধ্য ভাষা, ক্যারেক্টার সেট, এবং অবশ্যই, সাইট বা অ্যাপ্লিকেশনটির শিরোনাম বা নাম।

প্রতিটি HTML ডকুমেন্টে যোগ করুন

প্রতিটি ওয়েব পেজের জন্য বেশ কিছু অপরিহার্য উপাদান রয়েছে। এই উপাদানগুলো অনুপস্থিত থাকলেও ব্রাউজার কন্টেন্ট রেন্ডার করে, কিন্তু আপনার উচিত এগুলো অন্তর্ভুক্ত করা।

<!DOCTYPE html>

যেকোনো HTML ডকুমেন্টের প্রথম অংশটি হলো প্রিয়েম্বল। HTML-এর জন্য শুধু <!DOCTYPE html> ট্যাগটিই যথেষ্ট। এটিকে দেখতে একটি HTML এলিমেন্টের মতো মনে হলেও, এটি আসলে ডকটাইপ নামক একটি বিশেষ নোড। ডকটাইপ ব্রাউজারকে স্ট্যান্ডার্ডস মোড ব্যবহার করতে নির্দেশ দেয়। এটি বাদ দিলে, ব্রাউজারগুলো কুইর্কস মোড নামে পরিচিত একটি ভিন্ন রেন্ডারিং মোড ব্যবহার করে। ডকটাইপ অন্তর্ভুক্ত করলে কুইর্কস মোড প্রতিরোধ করা সম্ভব হয়।

<html>

<html> এলিমেন্টটি একটি HTML ডকুমেন্টের মূল এলিমেন্ট। এটি <head> এবং <body> এর প্যারেন্ট, এবং ডকটাইপ ছাড়া HTML ডকুমেন্টের বাকি সবকিছু এর মধ্যেই থাকে। এটি বাদ দিলে ভাষাটি উহ্য থাকে, কিন্তু ডকুমেন্টের ভাষা ঘোষণা করার জন্য এটি অন্তর্ভুক্ত করা উচিত।

বিষয়বস্তুর ভাষা

<html> ট্যাগের lang অ্যাট্রিবিউটটি ডকুমেন্টের প্রধান ভাষা নির্ধারণ করে। এর মান হলো একটি ISO ভাষা কোড এবং এর পরে ঐচ্ছিকভাবে একটি অঞ্চলের নাম যুক্ত করা যায়। উদাহরণস্বরূপ, কানাডায় ফরাসি ভাষার কোড হলো fr-CA , আর বুর্কিনা ফাসোতে এটি হলো fr-BF । এই ঘোষণাটি স্ক্রিন রিডার, সার্চ ইঞ্জিন এবং অনুবাদ পরিষেবাগুলোকে ডকুমেন্টের ভাষা শনাক্ত করতে সাহায্য করে।

ডকুমেন্টের প্রধান ভাষার ব্যতিক্রম চিহ্নিত করতে আপনি অন্যান্য ট্যাগে lang অ্যাট্রিবিউট ব্যবহার করতে পারেন। head-এ এর ব্যবহারের মতোই, body-এর মধ্যে lang অ্যাট্রিবিউটের কোনো দৃশ্যমান প্রভাব নেই। এটি একটি বিশেষ অর্থ যোগ করে, যার ফলে সহায়ক প্রযুক্তি এবং স্বয়ংক্রিয় পরিষেবাগুলো নির্দিষ্ট কন্টেন্টের ভাষা শনাক্ত করতে পারে।

ডকুমেন্টের ভাষা নির্ধারণ এবং সেই মূল ভাষার ব্যতিক্রম ঠিক করার পাশাপাশি, অ্যাট্রিবিউটটি CSS সিলেক্টরেও ব্যবহার করা যায়। <span lang="fr-fr">Ceci n'est pas une pipe.</span> অ্যাট্রিবিউট এবং ল্যাঙ্গুয়েজ সিলেক্টর [lang|="fr"] ও :lang(fr) দিয়ে টার্গেট করা যায়।

ওপেনিং এবং ক্লোজিং <html> ট্যাগের মাঝে আমরা দুটি চাইল্ড ট্যাগ পাই: <head> এবং <body> ।

<!DOCTYPE html>
<html lang="en-US">
  <head>
  </head>
  <body>
  </body>
</html>

<head> এলিমেন্টে একটি সাইট বা অ্যাপ্লিকেশনের মেটাডেটা থাকে, অন্যদিকে <body> এলিমেন্টে দৃশ্যমান কন্টেন্ট থাকে। এই বিভাগের বাকি অংশে <head> এলিমেন্টের ভিতরে থাকা কম্পোনেন্টগুলোর উপর আলোকপাত করা হয়েছে।

<head> এর ভিতরে প্রয়োজনীয় উপাদানসমূহ

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

অক্ষর এনকোডিং

<head> ট্যাগের একেবারে প্রথম এলিমেন্টটি হওয়া উচিত charset ক্যারেক্টার এনকোডিং ডিক্লারেশন। এটি টাইটেলের আগে আসে, যাতে ব্রাউজার সেই টাইটেলের অক্ষরগুলো এবং ডকুমেন্টের বাকি সমস্ত অক্ষর রেন্ডার করতে পারে।

লোকেল অনুযায়ী, বেশিরভাগ ব্রাউজারের ডিফল্ট এনকোডিং হলো windows-1252 । তবে, আপনার UTF-8 ব্যবহার করা উচিত, যা সমস্ত ক্যারেক্টারের এক থেকে চার-বাইট এনকোডিং সক্ষম করে।

ক্যারেক্টার এনকোডিং UTF-8 এ সেট করতে, অন্তর্ভুক্ত করুন:

<meta charset="utf-8" />

UTF-8 (কেস-ইনসেনসিটিভ) ঘোষণা করার মাধ্যমে, আপনি আপনার শিরোনামে ইমোজিও অন্তর্ভুক্ত করতে পারেন।

ডকুমেন্টের সবকিছুতেই ক্যারেক্টার এনকোডিং অন্তর্ভুক্ত থাকে, এমনকি <style> এবং <script> । এই ছোট্ট ডিক্লারেশনটির মানে হলো, আপনি ক্লাস নেম এবং selectorAPI তে ইমোজি যোগ করতে পারেন। যদি ইমোজি ব্যবহার করেন, তবে নিশ্চিত করুন যেন তা অ্যাক্সেসিবিলিটির ক্ষতি না করে ব্যবহারযোগ্যতা বাড়ায়।

নথির শিরোনাম

আপনার হোম পেজ এবং সমস্ত অতিরিক্ত পেজ সহ প্রতিটি পৃষ্ঠার একটি অনন্য শিরোনাম থাকা উচিত। ডকুমেন্ট শিরোনামের বিষয়বস্তু, অর্থাৎ <title> ট্যাগের শুরু এবং শেষের মাঝের লেখাটি, ব্রাউজার ট্যাব, খোলা উইন্ডোগুলোর তালিকা, হিস্টরি, সার্চ রেজাল্ট এবং <meta> ট্যাগ দিয়ে পুনরায় সংজ্ঞায়িত না করা হলে সোশ্যাল মিডিয়া কার্ডে প্রদর্শিত হয়।

<title>Machine Learning Workshop</title>

ভিউপোর্ট মেটাডেটা

সাইটের রেসপন্সিভনেসের জন্য ভিউপোর্ট মেটা ট্যাগ অপরিহার্য, যা ভিউপোর্টের প্রস্থ নির্বিশেষে কন্টেন্টের সঠিক রেন্ডারিং নিশ্চিত করে। যদিও ভিউপোর্ট মেটা ট্যাগ ২০০৭ সাল থেকে বিদ্যমান, এটি সম্প্রতি একটি স্পেসিফিকেশনে নথিভুক্ত করা হয়েছে । এটি ভিউপোর্টের আকার ও স্কেল নিয়ন্ত্রণ করে, ফলে ছোট স্ক্রিনের সাথে মানিয়ে নেওয়ার জন্য কন্টেন্ট সংকুচিত হয়ে যায় না।

<meta name="viewport" content="width=device-width" />

পূর্ববর্তী কোডটির অর্থ হলো "সাইটটিকে রেসপন্সিভ করা, যার শুরুতে কন্টেন্টের প্রস্থকে স্ক্রিনের প্রস্থের সমান করতে হবে"। width ছাড়াও, আপনি zoom এবং scalability সেট করতে পারেন, কিন্তু এগুলোর ডিফল্ট মান accessible থাকে। আপনি যদি বিষয়টি সুনির্দিষ্টভাবে করতে চান, তাহলে অন্তর্ভুক্ত করুন:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />

ভিউপোর্ট লাইটহাউস অ্যাক্সেসিবিলিটি অডিটের একটি অংশ। আপনার সাইটটি যদি স্কেলেবল হয় এবং এর কোনো সর্বোচ্চ আকার নির্ধারণ করা না থাকে, তবে এটি অডিটে উত্তীর্ণ হবে।

এখন পর্যন্ত, আমাদের HTML ফাইলের রূপরেখাটি হলো:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>

  </body>
</html>

অন্যান্য <head> বিষয়বস্তু

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

আপনি মেটা ক্যারেক্টার সেট এবং ডকুমেন্টের শিরোনাম দেখেছেন, কিন্তু <meta> ট্যাগ ছাড়াও আরও অনেক মেটাডেটা আছে যা অন্তর্ভুক্ত করা উচিত।

সিএসএস

<head> ট্যাগে আপনি আপনার HTML-এর স্টাইলগুলো যুক্ত করেন। আপনি যদি স্টাইল সম্পর্কে শিখতে চান, তবে CSS-এর জন্য একটি বিশেষ লার্নিং পাথ রয়েছে, কিন্তু তার জন্য আপনাকে জানতে হবে কীভাবে আপনার HTML ডকুমেন্টে স্টাইলগুলো অন্তর্ভুক্ত করতে হয়।

CSS অন্তর্ভুক্ত করার তিনটি উপায় আছে: <link> , <style> , এবং style অ্যাট্রিবিউট।

আপনার HTML ফাইলে স্টাইল অন্তর্ভুক্ত করার প্রধান দুটি উপায় হলো: <link> এলিমেন্টের rel অ্যাট্রিবিউটকে ` stylesheet সেট করে একটি বাহ্যিক রিসোর্স যোগ করা, অথবা আপনার ডকুমেন্টের head অংশে <style> ট্যাগের ভেতরে সরাসরি CSS কোড যুক্ত করা।

স্টাইলশীট অন্তর্ভুক্ত করার জন্য <link> ট্যাগটিই সবচেয়ে পছন্দের পদ্ধতি। একটি বা কয়েকটি এক্সটার্নাল স্টাইলশীট লিঙ্ক করা ডেভেলপার অভিজ্ঞতা এবং সাইটের পারফরম্যান্স, উভয়ের জন্যই ভালো: এর ফলে CSS কোড এখানে-সেখানে ছড়িয়ে ছিটিয়ে না থেকে এক জায়গায় রক্ষণাবেক্ষণ করা যায়, এবং ব্রাউজারগুলো এক্সটার্নাল ফাইলটি ক্যাশ করে রাখতে পারে, যার মানে হলো প্রতিবার পেজ নেভিগেশনের সাথে এটি আবার ডাউনলোড করার প্রয়োজন হয় না।

সিনট্যাক্সটি হলো <link rel="stylesheet" href="styles.css"> , যেখানে styles.css হলো আপনার স্টাইলশীটের ফাইলের নাম এবং আপেক্ষিক অবস্থান। আপনি type="text/css" অ্যাট্রিবিউটটি দেখতে পারেন, কিন্তু এটি আবশ্যক নয়। rel অ্যাট্রিবিউটটি সম্পর্ক নির্ধারণ করে, যা এই ক্ষেত্রে stylesheet । আপনি যদি rel অ্যাট্রিবিউটটি বাদ দেন, তাহলে আপনার CSS লিঙ্ক হবে না।

আপনি শীঘ্রই আরও কয়েকটি rel ভ্যালু সম্পর্কে জানতে পারবেন, কিন্তু প্রথমে আপনি CSS অন্তর্ভুক্ত করার অন্যান্য উপায়গুলো শিখবেন।

যদি আপনি আপনার এক্সটার্নাল স্টাইলশীট স্টাইলগুলোকে একটি ক্যাসকেড লেয়ারের মধ্যে রাখতে চান কিন্তু CSS ফাইলটি সম্পাদনা করার সুযোগ না থাকে, তাহলে আপনাকে <style> ভিতরে @import দিয়ে CSS কোডটি অন্তর্ভুক্ত করতে হবে:

<style>
  @import "styles.css" layer(firstLayer);
</style>

আপনার ডকুমেন্টে, এবং ঐচ্ছিকভাবে ক্যাসকেড লেয়ারে, স্টাইল শীট ইম্পোর্ট করার জন্য @import ব্যবহার করার সময়, @import স্টেটমেন্টগুলো অবশ্যই আপনার <style> অথবা লিঙ্ক করা স্টাইলশীটের প্রথম স্টেটমেন্ট হতে হবে এবং ক্যারেক্টার সেট ডিক্লারেশনের বাইরে থাকতে হবে।

যদিও ক্যাসকেড লেয়ার এখনও বেশ নতুন এবং আপনি হয়তো head <style> মধ্যে @import লক্ষ্য নাও করতে পারেন, তবুও আপনি প্রায়শই head স্টাইল ব্লকের মধ্যে কাস্টম প্রোপার্টি ডিক্লেয়ার করতে দেখবেন:

<style>
  :root {
    --theme-color: #226DAA;
  }
</style>

<link> , <style> বা উভয় দিয়ে যোগ করা স্টাইলগুলো হেডে রাখা উচিত। যদিও এগুলো ডকুমেন্টের বডিতে অন্তর্ভুক্ত থাকলেও কাজ করে, কিন্তু পারফরম্যান্সের কারণে আপনার স্টাইলগুলো হেডে যোগ করা উচিত। এটা শুনতে কিছুটা অযৌক্তিক মনে হতে পারে, কারণ আপনি হয়তো চাইবেন আপনার কন্টেন্ট যেন প্রথমে লোড হয়। কিন্তু, কন্টেন্ট লোড হওয়ার পর ব্রাউজারের পক্ষে এটি জানা ভালো যে কীভাবে কন্টেন্টটি রেন্ডার করতে হবে। প্রথমে স্টাইল যোগ করলে সেই অপ্রয়োজনীয় রিপেইন্টিং প্রতিরোধ করা যায়, যা কোনো এলিমেন্ট প্রথমবার রেন্ডার হওয়ার পর স্টাইল করা হলে ঘটে থাকে।

আপনার ডকুমেন্টের <head> এ এমন স্টাইল অন্তর্ভুক্ত করার একটি উপায় আছে যা আপনি কখনোই ব্যবহার করবেন না: ইনলাইন স্টাইল। আপনি সম্ভবত head-এ ইনলাইন স্টাইল কখনোই ব্যবহার করবেন না, কারণ ইউজার এজেন্টের স্টাইল শিটগুলো ডিফল্টভাবে head-কে লুকিয়ে রাখে। কিন্তু আপনি যদি জাভাস্ক্রিপ্ট ছাড়া একটি CSS এডিটর তৈরি করতে চান, উদাহরণস্বরূপ, যাতে আপনি আপনার পেজের কাস্টম এলিমেন্টগুলো পরীক্ষা করতে পারেন, তাহলে আপনি display: block ব্যবহার করে head-কে দৃশ্যমান করতে পারেন, এবং তারপর head-এর সবকিছু লুকিয়ে ফেলতে পারেন, এবং এরপর একটি ইনলাইন style অ্যাট্রিবিউটের মাধ্যমে একটি content-editable স্টাইল ব্লক দৃশ্যমান করতে পারেন।

<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
  head { display: block; }
  head * { display: none; }
  :root {
    --theme-color: #226DAA;
  }
</style>

আপনি <style> এলিমেন্টে ইনলাইন স্টাইল যোগ করতে পারেন।

এইচটিএমএল ডকুমেন্ট এবং বাহ্যিক রিসোর্সের মধ্যে সম্পর্ক তৈরি করতে link এলিমেন্ট ব্যবহার করা হয়। এই রিসোর্সগুলোর মধ্যে কিছু ডাউনলোডযোগ্য, অন্যগুলো তথ্যমূলক। সম্পর্কের ধরনটি rel অ্যাট্রিবিউটের মান দ্বারা নির্ধারিত হয়। rel অ্যাট্রিবিউটের জন্য ২৫টি উপলব্ধ মান রয়েছে যা <link> , <a> , <area> বা <form> এর সাথে ব্যবহার করা যায়, এবং এর মধ্যে কয়েকটি সবগুলোর সাথেই ব্যবহার করা যায়। মেটা তথ্য সম্পর্কিত লিঙ্কগুলোকে head-এ এবং পারফরম্যান্স সম্পর্কিত লিঙ্কগুলোকে <body> তে অন্তর্ভুক্ত করা শ্রেয়।

এখন আপনি আপনার হেডারে আরও তিন ধরনের টাইপ অন্তর্ভুক্ত করবেন: icon , alternate , এবং canonical । পরবর্তী মডিউলে আপনি rel="manifest" চতুর্থ একটি টাইপ যোগ করবেন।

ফেভিকন

আপনার ডকুমেন্টের ফেভিকন চিহ্নিত করতে rel="icon" সহ <link> ট্যাগটি ব্যবহার করুন। ফেভিকন হলো একটি ছোট আইকন যা ব্রাউজার ট্যাবে, সাধারণত ডকুমেন্টের শিরোনামের বাম দিকে প্রদর্শিত হয়। ট্যাব ছোট হয়ে গেলে শিরোনামটি অদৃশ্য হয়ে যেতে পারে, কিন্তু আইকনটি দৃশ্যমান থাকে। বেশিরভাগ ফেভিকনই কোনো কোম্পানি বা অ্যাপ্লিকেশনের লোগো হয়ে থাকে।

আপনি যদি কোনো ফেভিকন ঘোষণা না করেন, তাহলে ব্রাউজারটি টপ-লেভেল ডিরেক্টরিতে (ওয়েবসাইটের রুট ফোল্ডারে) favicon.ico নামের ফাইলটি খুঁজবে। <link> ব্যবহার করে, আপনি একটি ভিন্ন ফাইলের নাম এবং অবস্থান ব্যবহার করতে পারেন: 

<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/https/web.dev/images/mlwicon.png" />

পূর্ববর্তী কোডটিতে বলা হয়েছে, "যেসব ক্ষেত্রে ১৬ পিক্সেল, ৩২ পিক্সেল বা ৪৮ পিক্সেল উপযুক্ত, সেখানে আইকন হিসেবে mlwicon.png ব্যবহার করুন।" 'sizes' অ্যাট্রিবিউটটি স্কেলেবল আইকনের জন্য any ' ভ্যালু অথবা স্পেস দিয়ে আলাদা করা বর্গাকার widthXheight ভ্যালুর একটি তালিকা গ্রহণ করে; যেখানে width এবং height-এর মানগুলো এই জ্যামিতিক ক্রমে ১৬, ৩২, ৪৮ বা তার বেশি হয়, সেখানে পিক্সেল এককটি বাদ দেওয়া হয় এবং X-এর ক্ষেত্রে কেস-ইনসেনসিটিভ হয়। 

<link rel="apple-touch-icon" sizes="180x180" href="/https/web.dev/images/mlwicon.png" />
<link rel="mask-icon" href="/https/web.dev/images/mlwicon.svg" color="#226DAA" />

সাফারি ব্রাউজারের জন্য দুই ধরনের বিশেষ, অ-প্রমিত আইকন রয়েছে: iOS ডিভাইসের জন্য apple-touch-icon এবং macOS-এ পিন করা ট্যাবের জন্য mask-icon । apple-touch-icon শুধুমাত্র তখনই প্রয়োগ করা হয় যখন ব্যবহারকারী হোম স্ক্রিনে কোনো সাইট যোগ করেন: আপনি বিভিন্ন ডিভাইসের জন্য ভিন্ন ভিন্ন sizes একাধিক আইকন নির্দিষ্ট করতে পারেন। mask-icon শুধুমাত্র তখনই ব্যবহৃত হবে যখন ব্যবহারকারী ডেস্কটপ সাফারিতে ট্যাবটি পিন করেন: আইকনটি নিজে একটি মনোক্রোম SVG হওয়া উচিত, এবং color অ্যাট্রিবিউটটি আইকনটিকে প্রয়োজনীয় রঙে পূরণ করে।

যদিও আপনি প্রতিটি পৃষ্ঠায় বা এমনকি প্রতিটি পৃষ্ঠা লোডের জন্য সম্পূর্ণ ভিন্ন একটি ছবি নির্ধারণ করতে <link> ব্যবহার করতে পারেন, তা করবেন না। সামঞ্জস্য এবং একটি ভালো ব্যবহারকারীর অভিজ্ঞতার জন্য, একটি একক ছবি ব্যবহার করুন। গুগল তার প্রতিটি ভিন্ন অ্যাপ্লিকেশনের জন্য আলাদা ফেভিকন ব্যবহার করে: উদাহরণস্বরূপ, একটি মেইল ​​আইকন, একটি ক্যালেন্ডার আইকন রয়েছে। কিন্তু গুগলের সমস্ত আইকন একই রঙের স্কিম ব্যবহার করে। আইকনটি দেখেই আপনি স্পষ্টভাবে বুঝতে পারেন যে একটি খোলা ট্যাবের বিষয়বস্তু কী।

সাইটের বিকল্প সংস্করণ

সাইটের অনুবাদ বা বিকল্প উপস্থাপনা শনাক্ত করতে rel অ্যাট্রিবিউটের alternate মান ব্যবহার করুন।

ধরে নিন আমাদের কাছে সাইটটির ফরাসি এবং ব্রাজিলীয় পর্তুগিজ ভাষায় অনূদিত সংস্করণ রয়েছে: 

<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />

অনুবাদের জন্য alternate ব্যবহার করার সময় hreflang অ্যাট্রিবিউটটি অবশ্যই সেট করতে হবে।

বিকল্প মানটি শুধু অনুবাদের জন্যই ব্যবহৃত হয় না। উদাহরণস্বরূপ, যখন type অ্যাট্রিবিউটটি application/rss+xml বা application/atom+xml এ সেট করা হয়, তখন এটি একটি RSS ফিডের জন্য বিকল্প URI নির্ধারণ করতে পারে type

সাইটটির একটি নকল পিডিএফ সংস্করণের লিঙ্ক: 

<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />

যদি rel ভ্যালুটি alternate stylesheet হয়, তাহলে এটি একটি বিকল্প স্টাইলশিট নির্ধারণ করে এবং সেই বিকল্প স্টাইলটির নাম দেওয়ার জন্য title অ্যাট্রিবিউটটি অবশ্যই সেট করতে হবে।

ক্যানোনিকাল

আপনি যদি মেশিন লার্নিং ওয়ার্কশপ-এর একাধিক অনুবাদ বা সংস্করণ তৈরি করেন, তাহলে সার্চ ইঞ্জিনগুলো প্রামাণিক উৎসটি শনাক্ত করতে পারবে না। সাইট বা অ্যাপ্লিকেশনটির জন্য পছন্দের ইউআরএল শনাক্ত করতে rel="canonical" ব্যবহার করুন।

আপনার অনুবাদ করা সমস্ত পৃষ্ঠায় এবং হোম পেজে ক্যানোনিকাল ইউআরএলটি অন্তর্ভুক্ত করুন এবং আমাদের পছন্দের ইউআরএলটি উল্লেখ করুন: 

<link rel="canonical" href="https://www.machinelearning.com" />

মূল উৎসকে কৃতিত্ব দেওয়ার জন্য বিভিন্ন প্রকাশনা এবং ব্লগিং প্ল্যাটফর্মে ক্রস-পোস্টিং করার সময় প্রায়শই rel="canonical" ক্যানোনিকাল লিঙ্কটি ব্যবহার করা হয়। যখন কোনো সাইট কন্টেন্ট সিন্ডিকেট করে, তখন তার মূল উৎসের ক্যানোনিকাল লিঙ্কটি অন্তর্ভুক্ত করা উচিত।

স্ক্রিপ্ট

<script> ট্যাগের মধ্যে স্ক্রিপ্ট অন্তর্ভুক্ত থাকে। এর ডিফল্ট টাইপ হলো জাভাস্ক্রিপ্ট। আপনি যদি অন্য কোনো স্ক্রিপ্টিং ল্যাঙ্গুয়েজ ব্যবহার করেন, তবে MIME টাইপসহ type অ্যাট্রিবিউটটি অন্তর্ভুক্ত করুন, অথবা জাভাস্ক্রিপ্ট মডিউলের জন্য type="module" ব্যবহার করুন। শুধুমাত্র জাভাস্ক্রিপ্ট এবং জাভাস্ক্রিপ্ট মডিউলগুলোই পার্স ও এক্সিকিউট করা হয়।

আপনার কোডকে আবদ্ধ করতে বা কোনো বাহ্যিক ফাইল ডাউনলোড করতে <script> ট্যাগ ব্যবহার করা যায়। MLW-তে কোনো বাহ্যিক স্ক্রিপ্ট ফাইল নেই, কারণ প্রচলিত ধারণার বিপরীতে, একটি কার্যকরী ওয়েবসাইটের জন্য আপনার জাভাস্ক্রিপ্টের প্রয়োজন নেই। এটি একটি HTML শেখার পথ, জাভাস্ক্রিপ্ট শেখার পথ নয়।

পরবর্তীতে একটি ইস্টার এগ তৈরি করার জন্য আপনি সামান্য জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করবেন: 

<script>
  document.getElementById('switch').addEventListener('click', function() {
    document.body.classList.toggle('black');
  });
</script>

এই কোড স্নিপেটটি ' switch আইডিযুক্ত একটি এলিমেন্টের জন্য একটি ইভেন্ট হ্যান্ডলার তৈরি করে। জাভাস্ক্রিপ্টে, কোনো এলিমেন্ট তৈরি হওয়ার আগে সেটিকে রেফারেন্স করা থেকে বিরত থাকা উচিত। যেহেতু switch এখনও তৈরি হয়নি, তাই আমরা এর ইভেন্ট হ্যান্ডলারটিও অন্তর্ভুক্ত করব না।

যখন আমরা লাইট সুইচ এলিমেন্টটি যোগ করব, তখন আমরা <head> এর পরিবর্তে <body> এর একেবারে শেষে <script> ট্যাগটি যুক্ত করব। কেন? এর দুটি কারণ আছে। যেহেতু আমরা এই স্ক্রিপ্টটি কোনো DOMContentLoaded ইভেন্টের উপর ভিত্তি করে তৈরি করছি না, তাই আমরা নিশ্চিত করতে চাই যে এলিমেন্টগুলো রেফারেন্সকারী স্ক্রিপ্টটি চালু হওয়ার আগেই যেন সেগুলোর অস্তিত্ব থাকে। আর, প্রধানত, জাভাস্ক্রিপ্ট শুধু রেন্ডার-ব্লকিংই নয়, বরং স্ক্রিপ্ট ডাউনলোড হয়ে গেলে ব্রাউজার অন্যান্য অ্যাসেট ডাউনলোড করাও বন্ধ করে দেয় এবং জাভাস্ক্রিপ্টের এক্সিকিউশন শেষ না হওয়া পর্যন্ত অন্য অ্যাসেট ডাউনলোড করা পুনরায় শুরু করে না। এই কারণে, জাভাস্ক্রিপ্ট রিকোয়েস্টগুলো প্রায়শই হেডের পরিবর্তে ডকুমেন্টের শেষে দেখা যায়।

দুটি অ্যাট্রিবিউট আছে যা জাভাস্ক্রিপ্ট ডাউনলোড এবং এক্সিকিউশনের ব্লকিং ভাব কমাতে পারে: defer এবং async । defer ব্যবহার করলে, ডাউনলোডের সময় HTML রেন্ডারিং ব্লক হয় না এবং ডকুমেন্টের অন্যান্য রেন্ডারিং শেষ হওয়ার পরেই জাভাস্ক্রিপ্ট এক্সিকিউট হয়। async ব্যবহার করলেও ডাউনলোডের সময় রেন্ডারিং ব্লক হয় না, কিন্তু স্ক্রিপ্টটির ডাউনলোড শেষ হয়ে গেলে, জাভাস্ক্রিপ্ট এক্সিকিউট হওয়ার সময় রেন্ডারিং থেমে যায়।

async এবং defer ব্যবহার করার সময় লোড হচ্ছে।

একটি বাহ্যিক ফাইলে MLW-এর জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করতে, আপনি এভাবে লিখতে পারেন: 

<script src="js/switch.js" defer></script>

defer অ্যাট্রিবিউট যোগ করলে সবকিছু রেন্ডার না হওয়া পর্যন্ত স্ক্রিপ্টটির এক্সিকিউশন স্থগিত থাকে, ফলে স্ক্রিপ্টটি পারফরম্যান্সের ক্ষতি করতে পারে না। ` async এবং defer অ্যাট্রিবিউটগুলো শুধুমাত্র এক্সটার্নাল স্ক্রিপ্টের ক্ষেত্রেই প্রযোজ্য।

ভিত্তি

আরও একটি এলিমেন্ট আছে যা শুধুমাত্র <head>. কদাচিৎ ব্যবহৃত <base> এলিমেন্টটি একটি ডিফল্ট লিঙ্ক ইউআরএল এবং টার্গেট সেট করার সুযোগ দেয়। href অ্যাট্রিবিউটটি সমস্ত রিলেটিভ লিঙ্কের জন্য বেস ইউআরএল নির্ধারণ করে।

target অ্যাট্রিবিউটটি, যা <base> এর পাশাপাশি লিঙ্ক এবং ফর্মের ক্ষেত্রেও প্রযোজ্য, নির্ধারণ করে যে লিঙ্কগুলো কোথায় খুলবে। এর ডিফল্ট মান _self , যা লিঙ্ক করা ফাইলগুলোকে বর্তমান ডকুমেন্টের একই কনটেক্সটে খোলে। অন্যান্য অপশনগুলোর মধ্যে রয়েছে _blank , যা প্রতিটি লিঙ্ককে একটি নতুন উইন্ডোতে খোলে; বর্তমান কন্টেন্টের _parent , যা ওপেনারটি আইফ্রেম না হলে self-এর মতোই হতে পারে; অথবা _top , যা একই ব্রাউজার ট্যাবে থাকে, কিন্তু যেকোনো কনটেক্সট থেকে বেরিয়ে এসে পুরো ট্যাবটি দখল করে নেয়।

বেশিরভাগ ডেভেলপার <base> ব্যবহার না করে, লিঙ্ক বা ফর্মের মধ্যে থাকা যে অল্প কয়েকটি লিঙ্ক তারা নতুন উইন্ডোতে খুলতে চান, সেগুলিতে target অ্যাট্রিবিউট যোগ করেন। 

<base target="_top" href="https://machinelearningworkshop.com" />

যদি আমাদের ওয়েবসাইটটি Yummly-এর মতো কোনো সাইটের একটি আইফ্রেমের (iframe) মধ্যে থাকে, তাহলে <base> এলিমেন্টটি অন্তর্ভুক্ত করার অর্থ হবে, যখন কোনো ব্যবহারকারী আমাদের ডকুমেন্টের ভেতরের কোনো লিঙ্কে ক্লিক করবেন, তখন লিঙ্কটি আইফ্রেম থেকে পপ-আউট হয়ে লোড হবে এবং পুরো ব্রাউজার উইন্ডোটি দখল করে নেবে।

এই এলিমেন্টটির একটি অসুবিধা হলো যে অ্যাঙ্কর লিঙ্কগুলো <base> দিয়ে সমাধান করা হয়। <base> কার্যকরভাবে <a href="#ref"> লিঙ্কটিকে <a target="_top" href="https://machinelearningworkshop.com#ref"> -এ রূপান্তরিত করে, যা ফ্র্যাগমেন্ট সংযুক্ত করে বেস ইউআরএল-এ একটি HTTP অনুরোধ পাঠায়।

<base> সম্পর্কে আরও কিছু কথা:

  • একটি ডকুমেন্টে শুধুমাত্র একটি <base> এলিমেন্ট থাকতে পারে।
  • যেকোনো রিলেটিভ ইউআরএল ব্যবহারের আগে এটি আসা উচিত, যার মধ্যে সম্ভাব্য স্ক্রিপ্ট বা স্টাইলশিট রেফারেন্সও অন্তর্ভুক্ত।

কোডটি এখন দেখতে এইরকম: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="icon" type="image/png" href="/https/web.dev/images/favicon.png" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
    <link rel="canonical" href="https://www.machinelearning.com" />
  </head>
  <body>

    <!-- <script defer src="scripts/lightswitch.js"></script>-->
  </body>
</html>

এইচটিএমএল মন্তব্য

স্ক্রিপ্টটি অ্যাঙ্গেল ব্র্যাকেট, ড্যাশ এবং একটি ব্যাং চিহ্নের মধ্যে থাকে, এভাবেই এইচটিএমএল কমেন্ট আউট করা হয়। <!-- এবং --> এর মধ্যে থাকা কোনো কিছুই দেখা বা পার্স করা হয় না। আপনি স্ক্রিপ্ট বা স্টাইল ব্লক ছাড়া পৃষ্ঠার যেকোনো জায়গায় এইচটিএমএল কমেন্ট রাখতে পারেন; স্ক্রিপ্ট বা স্টাইল ব্লকের ভেতরে জাভাস্ক্রিপ্ট এবং সিএসএস কমেন্ট ব্যবহার করা উচিত।

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

আপনার বোধগম্যতা যাচাই করুন

নথির গঠন সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন।

আপনি কীভাবে নথিটির ভাষা শনাক্ত করেন?

HTML ট্যাগে language অ্যাট্রিবিউটটি যোগ করুন।
আবার চেষ্টা করুন।
HTML ট্যাগে lang অ্যাট্রিবিউটটি যোগ করুন।
সঠিক!
<head> ট্যাগে Add the <lang> ।
আবার চেষ্টা করুন।

<head> এ অন্তর্ভুক্ত করা যায় এমন উপাদানগুলো নির্বাচন করুন।

<p>
আবার চেষ্টা করুন।
<title>
সঠিক!
<meta>
সঠিক!
পূর্ববর্তী
HTML এর ওভারভিউ
পরবর্তী
মেটাডেটা