এইচটিএমএল ৫ ব্রাউজার সাপোর্ট (HTML5 Browser Support)

এইচটিএমএল ৫ ব্রাউজার সাপোর্ট

এইচটিএমএল ৫ সকল আধুনিক ব্রাউজার সাপোর্ট করে। সকল নতুন এবং পুরাতন ব্রাউজার অটোমেটিক ভাবে অচেনা elements গুলোকে ইনলাইন element হিসেবে চিহ্নিত করে। এই কারনে আপনি অচেনা element গুলোকে চিহ্নিত নিয়ন্ত্রণ করার জন্য পুরাতন ব্রাউজার গুলো শিখতে পারেন। আপনি অনেক আগের ভার্সন IE6(windows XP 2001) শিখতে পারেন যা এইচটিএমএল এর অজানা element গুলোকে নিয়ন্ত্রণ করতে পারে।

এইচটিএমএল ৫ element গুলোকে ব্লক element হিসেবে ডিফাইন করা

এইচটিএমএল৫ ৮টি নতুন element কে ডিফাইন করে থাকে। সবগুলোই ব্লক লেভেল elements। পুরাতন ব্রাউজার গুলোকে সঠিক ফরম্যাট এ ব্যবহার করার জন্য সিএসএস এর ডিসপ্লে প্রপার্টি কে ব্লক আকারে সেট করতে হয়।

উদাহরণ

Example

header, section, footer, aside, nav, main, article, figure {
display: block;
}

নতুন element এইচটিএমএল এ যোগ করা

ব্রাউজার এর কৌশল অনুযায়ী এইচটিএমএল এর যেকোনো নতুন element কে যোগ করতে পারেন । নিচের উদাহরণ এ একটি নতুন element <myHero> যোগ করা হয়েছে

<!DOCTYPE html>
 <html lang="en">
 <head>
 <title>HTML5 Skeleton</title>
 <meta charset="utf-8">
 
 <!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
 </script>
 <![endif]-->
 
 <style>
 body {font-family: Verdana, sans-serif; font-size:0.8em;}
 header,nav, section,article,footer
 {border:1px solid grey; margin:5px; padding:8px;}
 nav ul {margin:0; padding:0;}
 nav ul li {display:inline; margin:5px;}
 </style>
 </head>
 <body>
 
 <header>
   <h1>HTML5 SKeleton</h1>
 </header>
 
 <nav>
 <ul>
   <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
   <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
   <li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
 </ul>
 </nav>
 
 <section>
 
 <h1>Famous Cities</h1>
 
 <article>
 <h2>London</h2>
 <p>London is the capital city of England. It is the most populous city in the United Kingdom,
 with a metropolitan area of over 13 million inhabitants.</p>
 </article>
 
 <article>
 <h2>Paris</h2>
 <p>Paris is the capital and most populous city of France.</p>
 </article>
 
 <article>
 <h2>Tokyo</h2>
 <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
 and the most populous metropolitan area in the world.</p>
 </article>
 
 </section>
 
 <footer>
 <p>&copy; 2014 W3Schools. All rights reserved.</p>
 </footer>
 
 </body>
 </html>

HTML5 এর নতুন উপাদান (HTML5 New Elements)

HTML5 New Elements গুলো এবং এদের কাজগুলো নিম্নে দেয়া হল

<article>	একটা ডকুমেন্ট এর মধ্যে আর্টিকেল বোঝাতে এই Element ব্যবহৃত হয়।
<aside>	কোন কন্টেন্ট যদি পেজ কন্টেন্ট এর থেকে আলাদা হয় তাহলে তা এই Element দ্বারা বোঝানো হয়।
<bdi>	কতগুলো বর্নের মধ্যে যদি নির্দিষ্ট কতগুলো বর্ন আলাদা ফরমেটে হয় তাহলে এই Element দ্বারা বোঝানো হয়।
<details>	এর দ্বারা অতিরিক্ত বিবরন ব্যবহারকারী আড়াল করে রাখতে পারে।
<dialog>	কোন ডায়লগ বক্স নির্দেশ করে।
<figcaption>	<figure> element এর caption নির্দেশ করে।
<footer>	কোন ডকুমেন্ট এর footer নির্দেশ করে।
<header>	কোন ডকুমেন্ট এর header নির্দেশ করে।
<main>	এর দ্বারা কোন ডকুমেন্ট এর প্রধান কন্টেন্ট নির্দেশ করা হয়।
<mark>	এর দ্বারা কোন ডকুমেন্ট এর সিলেক্ট করা বর্ন বোঝানো হয়।
<menuitem>	এর দ্বারা কোন পপ-আপ মেনু থেকে যে কোন কমান্ড সিলেক্ট করতে পারে।
<meter>	এর দ্বারা কোন ডকুমেন্ট এর কোন নির্দিষ্ট রেঞ্জ এর পরিমাপ বোঝানো হয়।
<nav>	এর দ্বারা কোন ডকুমেন্ট এর নেভিগেশন লিঙ্কস গুলো বোঝানো হয়।
<progress>	এর দ্বারা কোন ডকুমেন্ট কার্যপ্রক্রিয়া প্রকাশ করা হয়।
<section>	কোন একটি ডকুমেন্ট এর নির্ধারিত সেকশন প্রকাশ করে।
<summary>	এর দ্বারা <details> element এর বিস্তারিত অংশ দেখা যায়।
<time>	সময় ও তারিখ নির্দেশ করে।
<wbr>	সম্ভাব্য লাইন বিরতি প্রকাশ করে।

HTML5 এর শব্দার্থিক উপাদানসমূহ (HTML5 Semantic Elements)

এখন প্রশ্ন হল Semantic Elements কি?

একটি Semantic Elements এর প্রধান কাজ হল পরিষ্কারভাবে ব্রাউজার এবং ডেভেলপার উভয় এর অর্থ বর্ণনা করা।

non-semantic elements এর উদাহরণ:

<div> and <span> - Tells nothing about its content.

semantic elements এর উদাহরণ:

<form>, <table>, and <img> - Clearly defines its content.

Semantic Elements কোন কোন Browser Support করে?

এক কথাই বলা যাই HTML5 semantic elements আধুনিক সকল Browser এই Support করে।

নতুন উপাদানসমূহ:

<article>	নিবন্ধ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<aside>	সাধারণত সাইডবারের জন্য ব্যবহৃত হয়
<bdi>	একটি ভিন্ন দিক ফরম্যাটে লেখা প্রকাশের জন্য ব্যবহৃত হয়
<command>	কমান্ড বাটন সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<details>	অতিরিক্ত বিশদ ব্যাখ্যা ব্যবহারকারীর প্রদর্শন অথবা আড়াল করতে ব্যবহৃত হয়
<dialog>	ডায়লগ বক্স অথবা উইন্ডোতে সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<summary>	<details> উপাদানের সারমর্ম প্রদর্শনের জন্য ব্যবহৃত হয়
<figure>	চিত্রাঙ্কনের, ডায়াগ্রামে, ছবি, কোড তালিকা ইত্যাদির স্বয়ংসম্পূর্ণ বিষয়বস্তু নির্ধারণ করা হয়
<figcaption>	<figure> উপাদান জন্য ক্যাপশন ব্যবহৃত হয়
<footer>	একটি বিভাগের জন্য পাদচরণ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<header>	একটি বিভাগের জন্য হেডার সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<hgroup>	যখন একাধিক মাত্রার শিরোনাম থাকে, তখন <h1> থেকে <h6> উপাদানের সমষ্টিকে বুঝায়
<mark>	চিহ্নিত / হাইলাইট টেক্সট সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<meter>	একটি পরিচিত পরিসীমার মধ্যে স্কেলের পরিমাপ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<nav>	নেভিগেশন লিঙ্কগুলি সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<progress>	একটি টাস্ক অগ্রগতি প্রতিনিধিত্ব করে
<ruby>	রুবি টীকা সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<rt>	অক্ষরের একটি ব্যাখ্যা / উচ্চারণ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<rp>	Ruby টীকা সমর্থন করে না তা ব্রাউজারে দেখানোর জন্য ব্যবহৃত হয়
<section>	নথিতে একটি অধ্যায় সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<time>	তারিখ / সময় প্রদর্শনের জন্য ব্যবহৃত হয়
<wbr>	লাইন বিরতির জন্য ব্যবহৃত হয়
<audio>	শব্দ যুক্ত করার জন্য ব্যবহৃত হয়
<video>	ভিডিও যুক্ত করার জন্য ব্যবহৃত হয়
<source>	<video> এবং <audio> জন্য একাধিক মিডিয়া রিসোর্স যুক্ত করার জন্য ব্যবহৃত হয়
<embed>	একটি বহিরাগত অ্যাপ্লিকেশন অথবা ইন্টারেক্টিভ বিষয়বস্তুর জন্য একটি ধারক
<track>	<video> এবং <audio> এর জন্য টেক্সট গানগুলি সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<canvas>	গ্রাফিক্স আঁকতে ব্যবহৃত হয়
<datalist>	ইনপুট নিয়ন্ত্রণ জন্য পূর্ব নির্ধারিত অপশনের একটি তালিকা নির্দিষ্ট করে
<keygen>	key-জুটি জেনারেটরের জন্য ব্যবহৃত হয়
<output>	হিসাবের ফলাফল ব্যাখ্যা করার জন্য ব্যবহৃত হয়

HTML5 এ রূপান্তর (HTML5 Migration)

Typical HTML4	Typical HTML5
<div id="header">	<header>
<div id="menu">	<nav>
<div id="content">	<section>
<div id="post">	<article>
<div id="footer">	<footer>

Typical HTML4

বলে রাখা ভাল আপনি একই নিয়ম ব্যাবহার করে HTML5 থেকে HTML4 এবং XHTML এ পরিবর্তন করতে পারবেন। এখন একটা Typical HTML4 Page উদাহরণ দেখাই-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <title>HTML4</title>
 <style>
   body {font-family:Verdana,sans-serif;font-size:0.8em;}
   div#header,div#footer,div#content,div#post 
   {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
   div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
   div#content {background-color:#ddd;}
   div#menu ul {margin:0;padding:0;}
   div#menu ul li {display:inline; margin:5px;}
 </style>
 </head>
 <body>
 
 <div id="header">
   <h1>Monday Times</h1>
 </div>
 
 <div id="menu">
   <ul>
     <li>News</li>
     <li>Sports</li>
     <li>Weather</li>
   </ul>
 </div>
 
 <div id="content">
 <h2>News Section</h2>
 
 <div id="post">
   <h2>News Article</h2>
   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
   lurum hurum turum.</p>
   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
   lurum hurum turum.</p>
 </div>
 
 <div id="post">
   <h2>News Article</h2>
   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
   lurum hurum turum.</p>
   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
   lurum hurum turum.</p>
 </div>
 
 </div>
 
 <div id="footer">
   <p>&amp;copy; 2014 Monday Times. All rights reserved.</p>
 </div>
 
 </body>
 </html>

যেভাবে HTML5 Doctype পরিবর্তন করবেন

HTML4 doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5 doctype:

<!DOCTYPE html>

যেভাবে HTML5 Encoding পরিবর্তন করবেন

HTML4:

HTML5:

এইচটিএমএল(5) স্টাইল গাইড এবং কোডিং কনভেনশন HTML(5) Style Guide and Coding Conventions

এইচটিএমএল কোডিং এর নিয়ম

ওয়েব ডেভেলপাররা এইচটিএমএল এ কোডিং স্টাইল এবং syntax ব্যবহারের ক্ষেত্রে প্রায়ই দ্বিধান্বিত থাকেন।

২০০০ থেকে ২০১০ সালের মধ্যে অনেক ওয়েব ডেভেলপার এইচটিএমএলকে এক্সএইচটিএমএল এ রূপান্তরিত করে।

এক্সএইচটিএমএল দিয়ে ডেভেলপাররা সঠিক এবং সুন্দরভাবে কোডিং লিখতে বাধ্য হয়।

যখন এইচটিএমএল ৫ কোড ভ্যালিডেশন (বৈধ্যতা) নিয়ে আসে তখন এটি আরও সাবলিল হয়।

HTML5 দিয়ে, আপনি আপনার নিজেকে তৈরি করতে পারবেন শ্রেষ্ঠ অনুশীলন, স্টাইল গাইড এবং কোডিং কনভেনশন দ্বারা।

স্মার্ট এবং ভবিষ্যত প্রমান

এইচটিএমএল এ গঠনগত ভাবে কোডিং করলে তা অন্যদের জন্য বুজতে অনেক সহজ হয়।

ভবিষ্যতে এক্সএমএল রিডার এর মত প্রোগ্রাম আপনার এইচটিএমএল পরতে চাইতে পারে।

স্টাইল এ দক্ষতা আনতে হলে স্মার্ট, পরিপাটি, পরিষ্কার, এবং সুগঠিত হতে হবে।

সঠিক ডকুমেন্ট টাইপ

ডকুমেন্ট এর প্রথমে doctype লিখতে হবে

<!DOCTYPE html>

যদি ছোট হাতের অক্ষরে আমরা লিখি

<!DOCTYPE html>

ছোট হাতের এলিমেন্ট (উপাদান) এর নাম লিখতে হবে

উপাদানের নামের ক্ষেত্রে এইচটিএমএল ৫ একসাথে ছোট এবং বড় হাতের লেখাকে গ্রহন করে।

আমরা সবসময় সুপারিশ করি উপাদানের নাম ছোট হাতের অক্ষরে লেখার জন্য।

একসাথে ছোট এবং বড় হাতের অক্ষর মিলে লেখা ভাল নয়।
ডেভেলপারদের ছোট হাতের অক্ষরে লিখতে হবে (এক্সএইচটিএমএল হিসাবে)
ছোট হাতের অক্ষরে লেখা পরিচ্ছন্ন দেখায়
ছোট হাতের অক্ষরে লেখা সহজ।

খারাপ অনুশীলন

<SECTION>
  <p>This is a paragraph.</p>
</SECTION>

আরও বেশি খারাপ অনুশীলন

 <Section>
  <p>This is a paragraph.</p>
</SECTION>

সঠিক অনুশীলন

<section>
  <p>This is a paragraph.</p>
</section>

সকল এলিমেন্ট (উপাদান) এর সমাপনি বন্ধনী

এইচটিএমএল ৫ এ, সকল এলিমেন্ট এর বন্ধনী সমাপ্ত করার প্রয়োজন নেই। (উদাহরণ <p> এলিমেন্ট)

আমরা সবসময় বলি সকল ট্যাগ বা উপাদানকে সমাপ্ত করার জন্য।

খারাপ অনুশীলন

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

সঠিক অনুশীলন

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

এইচটিএমএল এর ফাকা উপদানগুলোর ট্যাগ সমাপ্ত করা

এইচটিএমএল ৫ এ এই বিষয়টি অপশনাল

এটি গ্রহণযোগ্য

<meta charset="utf-8">

অথবা

<meta charset="utf-8" />

এক্সএইচটিএমএল এবং এক্সএমএল এ স্লাশ চিহ্ন (/) দরকার পরে।

যদি আপনি এক্সএমএল সফটওয়্যারকে পেজ অ্যাক্সেস করার অনুমতি দেন তাহলে, এই চিহ্নকে রেখে দেওয়ােই ভাল।

Attribute এর নাম ছোট হাতের হতে হবে

Attribute নামের ক্ষেত্রে এইচটিএমএল ৫ একসাথে ছোট এবং বড় হাতের লেখাকে গ্রহণ করে।

আমরা সবসময় এর নাম ছোট হাতের অক্ষরে লেখার জন্য সুপারিশ করি ।

একসাথে ছোট এবং বড় হাতের অক্ষর মিলে লেখা ভাল নয়।
ডেভেলপারদের ছোট হাতের অক্ষরে লিখতে হবে (এক্সএইচটিএমএল হিসাবে)
ছোট হাতের অক্ষরে লেখা পরিচ্ছন্ন দেখায়
ছোট হাতের অক্ষরে লেখা সহজ।

ভাল দেখায় না

ভাল দেখায়

উদ্ধৃতি অ্যাট্রিবিউট মান

কোটেশন চিহ্ন ছাড়া attribute এর ভ্যালুকে লেখা এইচটিএমএল ৫ সাপোর্ট করে।

আমরা সবসময় সুপারিশ করি

যদি ভ্যালুতে ফাকা স্থান থাকে তাহলে উদ্ধৃতি চিহ্ন ব্যবহার করতে হবে
ভিন্ন ভিন্ন স্টাইল মিসিয়ে লেখা কখনই ভাল নয়
কোটেশন দেয়া মান পড়া সহজ ।

নিচের কোডটি কাজ করবে না কারন ফাকা স্থান আছে :

<table class=table striped>

এটি কাজ করবে

<table class="table striped">

ইমেজ এট্রিবিউট

সবসময় ইমেজ এর সাথে alt attribute ব্যবহার করতে হবে। কারন যখন ছবি লোড না হবে তখন খুব প্রয়োজনীয়।

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

ইমেজ সাইজ নির্ধারণ করে দেওয়া উচিত কারন ব্রাউজার ইমেজ লোড হওয়ার পূর্বে তার জন্য জায়গা ফাকা রাখে

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Spaces এবং equal চিহ্ন

ফাকা জায়গা বেশি হলে কোন সমস্যা নেই

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

কিন্তু ফাকা কম হলে তা পরতে সহজ এবং সুবিধার হয়

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

লম্বা কোড লাইন এড়িয়ে চলুন

যখন এইচটিএমএল এডিটর ব্যবহার করা হয় তখন বাম পাস থেকে ডান পাশে স্ক্রল করা এক ধরনের বিরক্তিকর। এইজন্য ৮০ টি ক্যারেক্টার এর লাইন এ লিখতে হবে।

ফাকা line এবং Indentation

কোন কারন ছাড়া ফাকা লাইন করা উচিত নয়।

বড় বড় কোড এর জন্য তা ব্যবহার করা যাবে।

Indentation এর ক্ষেত্রে ট্যাব এর পরিবর্তে ২ টি স্পেস ব্যবহার করতে হবে।

কোন কারন ছাড়া ফাকা জায়গা এবং Indentation ব্যবহার করা উচিত নয়।

প্রয়োজনীয় নেই

 <body>

  <h1>Famous Cities</h1>

  <h2>Tokyo</h2>

  <p>
    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
  </p>

</body>

ভাল

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>

</body>

টেবিল এর উদাহরণ

 <table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

লিস্ট এর উদাহরণ

 <ol>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

<html> এবং body ট্যাগ বাদ দেওয়া

এইচটিএমএল ৫ এ <html>এবং <body> ট্যাগ বাদ দেওয়া হয়েছে

এইচটিএমএল ৫ এর ক্ষেত্রে উদাহরণ

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

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

আমরা কখনই বলি না <html>এবং <body> ট্যাগ বাদ দেওয়ার জন্য।

<html> হল ডকুমেন্ট এর রুট। পেজ এর ভাষাকে এর মাঝে নির্দিষ্ট করে দিতে হয়।

<!DOCTYPE html>
<html lang="en-US">

ল্যাঙ্গুয়েজ ডিক্লায়ার করা এসেম্বিলি অ্যাপলিকেশন (স্ক্রিণ রিডার) এবং সার্চ ইঞ্জিন এর জন্য গুরুত্বপূর্ণ ।

<html>এবং <body> ট্যাগ বাদ দেওয়া DOM এবং এক্সএমএল সফটওয়্যার ক্র্যাশ এর কারণ হতে পারে।

পুরাতন ব্রাউজার (IE9) এরর দেখাতে পারে যদি <body> না ব্যবহার না করা হয়।

<head> ট্যাগ কি বাদ দেওয়া

এইচটিএমএল ৫ এর ক্ষেত্রে এটি ঠিক আছে।

ডিফল্ট ভাবে ব্রাউজার বডি সেকশন এর পূর্বে সকল উপাদান যোগ করে হেড সেকশন এর মধ্যে । সুতরাং <head> ট্যাগ কে বাদ দেওয়া যেতে পারে।

উদাহরণ

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

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

</html>

Meta data

এইচটিএমএল ৫ এ <title> এলিমেন্ট অত্যাবশ্যকীয়। টাইটেলকে যথাসম্ভব অর্থবহ করুন।

<title>HTML5 Syntax and Coding Style</title>

সঠিকভাবে search engine এ ইনডেক্স করার ক্ষেত্রে ডকুমেন্ট এর মধ্যে ভাষা এবং ক্যারেক্টার encode কে ডিফাইন করে দিতে হবে

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

এইচটিএমএল কমেন্ট

ছোট কমেন্ট এক লাইনে লেকা যেতে পারে।

<!-- This is a comment -->

অনেক বড় কমেন্ট হলে আলাদা আলাদা লাইন এ লিখতে হবে।

<!--
 This is a long comment example. This is a long comment example. This is a long comment example.
 This is a long comment example. This is a long comment example. This is a long comment example.
 -->

লম্বা কমেন্ট একাধিক লাইনে ভেঙ্গে লিখলে বুঝতে সুবিধা হয়।

স্টাইল শিট

Style শিট লিঙ্ক করার ক্ষেত্রে সাধারন syntax ব্যবহার করুন

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

ছোট নিয়ম এক লাইন এ লিখতে হবে

p.into {font-family:"Verdana"; font-size:16em;}

বড় নিয়ম কয়েকটি লাইন এ লিখতে হবে

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

ব্রাকেট এর শুরুর আগে একটা স্পেস ব্যবহার করতে হবে,
indentation এ দুইটি স্পেস ব্যবহার করতে হবে,
প্রপার্টি এবং এর ভ্যালুর মাঝে কোলন এর পাশাপাশি একটি স্পেস ব্যবহার করতে হবে,
কমা এবং সেমিকোলন এর পরে একটা স্পেস ব্যবহার করতে হবে,
প্রত্যেক জোড়া প্রপার্টি ভ্যালু এর পরে সেমিকোলন ব্যবহার করতে হবে,
কোটেশন ব্যবহার করতে হবে যদি ভ্যালু এর মাঝে একটা স্পেস থাকে,
৮০ ক্যারেক্টার এর উপরে কোন লাইনে রাখা যাবে না।

যেকোনো ধরনের লেখার ক্ষেত্রে স্পেস এর পরে কমা বা সেমিকোলন যুক্ত করা সাধারন নিয়ম।

এইচটিএমএল এর মধ্যে javascript লোড করা

সাধারন syntax ব্যবহার করে external javascript লোড করা যায়। এর জন্য কোন attribute এর দরকার পরে না।

<script src="myscript.js">

Javascript দিয়ে এইচটিএমএল কে অ্যাক্সেস করা

যদি এইচটিএমএল স্টাইল যদি পরিপাটি না হয় তাহলে javascript এ এরর আসতে পারে। এই দুইটি statement দুই ধরনের ফলাফল দেখাবে

var obj = getElementById("Demo")

var obj = getElementById("demo")

যদি সম্ভব হয় এইচটিএমএল এর উপাদানের সাথে javascript যোগ করার পর উপাদানের একই নাম ব্যবহার করতে হবে।

ফাইল এর নামের ক্ষেত্রে ছোট হাতের অক্ষর ব্যবহার

ফাইল এর নাম করনের ক্ষেত্রে অনেক ওয়েব সার্ভার কেস এর ব্যাপারে সক্রিয় (apache , unix)

london.jpg কখনই London.jpg নামে অ্যাক্সেস হবে না

অন্যান্য ওয়েব সার্ভার যেমন (Microsoft, IIS) খুব বেশি সক্রিয় না

London.jpg কে London.jpg বা london.jpg নামে অ্যাক্সেস করা যাবে।

যদি আপনি বড় ছোট হাতের অক্ষর একসাথে ব্যবহার করেন তাহলে অত্যন্ত সামঞ্জস্যপূর্ণ হতে হবে।

যদি আপনি সংবেদনশীল নয় এমন একটি সার্ভার থেকে সংবেদনশীল এমন একটি সার্ভার এ যান তাহলে ছোট ছোট এরর আপনার ওয়েব পেজকে নষ্ট করে দিতে পারে।

এই সকল সমস্যা থেকে প্রতিকারের জন্য ছোট হাতের অক্ষর ব্যবহার করতে হবে।

File extensions

এইচটিএমএল ফাইল এর এক্সটেনশন হল .html ( বা .htm)

সিএসএস ফাইল এর এক্সটেনশন হল .css

Javascript ফাইল এর এক্সটেনশন হল .js

এইচটিএমএল কুইজ । HTML Quiz

HTML মাষ্টার ক্লাস ০৫

এইচটিএমএল ৫ ব্রাউজার সাপোর্ট (HTML5 Browser Support)