২) অধ্যায়-২ (এইচটিএমএল - ১)।

২.১) এইচটিএমএল কি?

এইচটিএমএল একটি মার্কআপ ল্যায়গুয়েজ, এটি কোন পোগ্রামিং ল্যায়গুয়েজ নয় অর্থাৎ এটি নিজে কোন রকমমের হিসাব নিকাশ বা ডায়নামিক্যলি কোন কাজ করতে পারেনা যা জাভাস্ক্রিপ্ট অথবা পিএইচপি পারে । ওয়েব পেজ তৈরির শুরুতে আমাদেরকে এইচটিএমএল শিখতে হবে । আমি এই অধ্যায় এইচটিএমএল নিয়ে আলোচনা করব । এইচটিএমএল (HTML) মানে Hyper Text Markup Language. বিষয়টি বুঝতে আমরা একটি উদাহরনে সাহায্য নিতে পারি এর জন্যে নিচেরে কাজগুলো আমারা পর্যায়ক্রমে করি ।

  • ধাপ: ১ :- কোড এডিটর (sublime text) খুলি এবং একটি নতুন ডকুমেন্ট ওপেন করি ।
  • ধাপ: ২:- এবার ডকুমেন্টটিকে হার্ডডিস্কের যে কোন ফোল্ডারে index.html নাম দিয়ে সেভ করি । খেয়াল রাখি যেন ফাইলটির এক্সট্নেসন .html হয় ।
  • ধাপ: ৩:- এবার ফাইলটিতে নিচের কোড গুলো হুবহু টাইপ করি ।
This is the site name.
This is the site Title.
This is the site paragraph.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi tenetur cum ab, natus sapiente hic repellat, dolores vero cupiditate, omnis eligendi sequi beatae amet error. Quas quia deserunt quaerat unde.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi tenetur cum ab, natus sapiente hic repellat, dolores vero cupiditate, omnis eligendi sequi beatae amet error. Quas quia deserunt quaerat unde.

This is a list item.
-Item one
-Item two
-Item three

ধাপ: ৪:- এবার ফাইলটি যদি আমরা ব্রাউজারে ওপেন করি তবে নিচের মত দেখব ।

Figure: 1

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

<title>This is the site name.</title>
<h1>This is the site Title.</h1>
<p>This is the site paragraph.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi tenetur cum ab, natus sapiente hic repellat, dolores vero cupiditate, omnis eligendi sequi beatae amet error. Quas quia deserunt quaerat unde.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi tenetur cum ab, natus sapiente hic repellat, dolores vero cupiditate, omnis eligendi sequi beatae amet error. Quas quia deserunt quaerat unde.</p>

<ul>
This is a list item.
	<li>-Item one</li>
	<li>-Item two</li>
	<li>-Item three</li>
</ul>

Figure: 2

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

২.২) এইচটিএমএল ডকুমেন্ট এর গঠন ।

আমরা উপরের উদাহরনে দেখেছি প্রথমে টাইটেল এরপর হেডিং এরপর প্যরাগ্রাফ ইত্যাদি প্রযায়ক্রমে এসেছে। অর্থাৎ এইচটিএমএল ডকুমেন্ট এর একটি স্টান্ডার্ড গঠন আছে । আপনার পেজের কন্টেন্ট ভিন্ন হলেও সকল পেজের প্রথমিক মার্কআপ একই রকমের । চিত্র-৩ এ একটি এইচটিএমএল ডকুমেন্ট এর মার্কআপ দেয়া হল । চিত্রে আমরা নিম্নের অবস্থানগুলো দেখি ।

  • লাইন নং-১: ডকটাইপ ডিক্লারেসনস ।এটি ডকুমেন্টটি কোন এইচটিএমএল ভার্সনে লেখা সেটি উল্লেখ করে । এটি ছারা ডকুমেন্টটি ইনভেলিড, সুতরাং ডকটাইপ ডিক্লাসেনস অবস্যই ডকুমেন্টএর শুরুতে থাকতে হবে ।
  • লাইন নং-২: ডকুমেন্টএর মুল অংশ । দুটি ট্যাগ <html></html> নিয়ে এই অংশটি গঠিত । সাধারনত ওয়েব পেজ বলতে এই অংশকে বুঝায় । এটি আবার দু্ই অংশে বিভক্ত, একটি হল হেড অংশ এবং অন্যটি হল বডি অংশ ।

Figure: 3

  • লাইন নং-৩: ডকুমেন্টএর হেডার পার্ট (<head></head>) । এই অংশে ডকুমেন্টটির যাবতীয় তথ্য থাকে, যা সাইট ব্রাউজার কারির জন্যে গুরুত্বপূর্ন নয় তবে সাইটটির ফাংশনালিটির জন্যে এবং গুগল সার্চ ENGINE এর জন্যে প্রয়োজন । এখানে যে সকল ট্যাগ থাকে সে রকম কিছু ট্যাগ হল - <link>, <meta> ইত্যাদি ।
  • লাইন নং-৪: ডকুমেন্টএর বডি পার্ট (<body></body>) । এই অংশটি আমরা ব্রাউজারে দেখি । একটি ওয়েব সাইটের সকল কন্টেন্ট এই অংশে থাকে এবং আমরা এটিকেই বিভিন্ন ভাবে ভিজিটরের সামনে উপস্থাপন করি ।

২.৩) এইচটিএমএল ট্যাগ এর পরিচিতি এবং লিখবার নিয়ম ।

  • প্রতিটি ট্যাগ শুর হয় < সিম্বল দিয়ে এবং শেষ হয় > সিম্বল দিয়ে । এবং সবসময় ছোট হাতের অক্ষরে লিখতে হয় ।

Figure: 4

  • প্রতিটি ট্যাগ এর দুটি অংশ একটিকে বলে স্টার্টিং ট্যাগ এবং অন্য অংশকে বলে এনডিং ট্যাগ। তবে কিছু ট্যাগের এনডিং ট্যাগ নেই এদেরকে ইম্পটি ট্যাগ বলে ।
  • প্রতিটি ট্যাগ দ্বারা নির্দিষ্ট কন্টেন্টকে বুঝায় ।
  • কোনকোন ট্যাগের কজকে বৃদ্ধি করতে এট্রিবিউটের প্রয়োজন হয় ।
  • প্রতিটি ট্যাগ সর্ম্পকে বিস্তারিত জানা যাবে www.w3scehool.com সাইটটিতে ।

২.৪) এট্রিবিউট এর পরিচিতি ।

এট্রিবিউট এক রকমের কী ভেলু পেয়ার, অর্থাৎ প্রতিটি এট্রিবিউটের বিভিন্ন রকমের ভেলু আছে এবং ভিন্ন ভিন্ন অবস্থায় এটি ব্যবহার করতে হয় । আমরা বিভিন্ন এট্রিবিউট সর্ম্পকে ট্যাগের সাথে সাথে আলোচনা করব ।

Figure: 5

২.৫) কিছু বিষয় সর্ম্পকে আলোচনা ।

২.৫.১) ইন-লাইন ইলিমেন্ট ।

এইচটিএমএল এর সকল ট্যাগ দুই ভাগে বিভক্ত, ইন-লাইন এবং ব্লক ইলিমেন্ট। ইন-লাইন হলো সেই সকল ইলিমেন্ট, যে গুলোর কন্টেন্ট একই লাইনে থাকে। অর্থাৎ এই ইলিমেন্ট গুলো আগের ইলিমেন্ট গুলোর পরেই অবস্থান করে এবং কন্টেন্ট এর সমান যায়গা দখল করে । এই সকল ইলিমেন্ট গুলোর ক্ষেত্রে কিছু সিএসএস প্রোর্পাটি কাজ করেনা যতখননা সেটিকে সিএসএস দ্বারা ব্লকলেভেল ইলিমেন্টএ পরিনত করা না হচ্ছে। উদাহরন : <span></span>, <em></em>, <small></small> ইত্যাদি।

২.৫.২) ব্লক লেভেল ইলিমেন্ট ।

ব্লকলেভেল ইলিমেন্ট হচ্চে সেই সকল ইলিমেন্ট যেগুলো সবসময় নতুন লাইনে শুরু হয় এবং এটি ডকুমেন্টএর পুরু দৈর্ঘ দখল করে। ব্লকলেভেল ইলিমেন্টকেও ইন-লাইন ইলিমেন্টে পরিনত করা যায় সিএসএস দ্বারা । উদাহরন : <div></div>, <p></p> ইত্যাদি।

২.৫.৩) সিমিট্রিক ইলিমেন্ট ।

সিমিট্রিক ইলিমেন্ট বলতে বুঝায় যে সকল ইলিমেন্ট গুলো তাদের ভিতরের কন্টেন্টকে সঠিক ভাবে প্রকাশ করে। যেমন আমি যদি কোন প্যরাগ্রাফ ব্যবহার করতে চাই তবে আমাকে <p></p> ইলিমেন্ট ব্যবাহার করতে হবে, কারন এই ট্যাগটি দ্বারা প্যারাগ্রাফ বুঝায় । ঠিক তেমনি নেভিগেশনের জন্যে <nav></nav> ইলিমেন্ট ব্যবহার করতে হবে।

২.৫.৪) ননসিমিট্রিক ইলিমেন্ট ।

ননসিমিট্রিক ইলিমেন্ট হলো সেই সকল ইলিমেন্ট যা সেটির ভিতরের কন্টেন্টকে সঠিক ভাবে প্রকাশ করতে পারেনা। অর্থাৎ ট্যাগ দেখে বুঝাযায়না যে সেটির ভিতরে কন্টেন্টটি কি প্রকাশ করে। যেমন <div></div>, <span></span> ইত্যাদি ।

২.৫.৫) ইম্পটি ইলিমেন্ট ।

যে সকল ট্যাগের কোন এন্ডিং ট্যাগ নেই তাদেরকে ইম্পটি ট্যাগ বলে । যেমন <img>, <br>, <link> ইত্যাদি ।

২.৬) বিভিন্ন ট্যাগ সর্ম্পকে বিস্তারিত আলোচনা ।

২.৬.১) টেক্সট ফরমেটিং ট্যাগ ।

এই ট্যাগ গুলো দ্বারা সাইটের যতরকমের টেক্সট আছে, সেগুলোকে ফরমেটিং করা হয় । এটি অনেকটা মাইক্রসফট ওয়ার্ড এর মেনু বার দিয়ে আমারা যে কাজগুলো করি যেমন- ফন্ট পরিবর্তন, ফন্টেএর সাইজ পরিবর্তন, টেক্সট এলাইন করা ইত্যাদি । নিচে আমরা গুরুত্বপূর্ন ট্যাগ গুলো আলোচনা করব ।

২.৬.১.১) হেডিং ট্যাগ ( h1,h2,h3,h4,h5,h6) ।
  • এইচটিএমএল h1 থেকে h6 পযর্ন্ত ছয়টি হেডিং লেভেল রয়েছে ।
  • h1 হচ্ছে সবচেয়ে গুরুত্বপূর্ন হেডিং এবং পর্যায়ক্রেমে এটি কমতে থাকে ।
  • এটি একটি ব্লকলেভেল ইলিমেন্ট, অর্থাৎ প্রতিটি হেডিং নতুন লাইনে শুরু হয় ।
  • সাধারনত h1 ট্যাগটি সাইটের নামকে নির্দেশ করে ।
  • হেডিং ট্যাগের ক্ষেত্রে সাধারনত দুইটি এট্রিবিউট ব্যবহার করা হয়, একটি হল Id এবং অন্যটি হল Class ।
এট্রিবিউট এর নাম এট্রিবিউট এর ব্যবহার 
		Id<br>
		Example:<br>
		<h1 id='heading'>
    This is heading one with id attribute
    </h1>
এই এট্রিবিউটটি ব্যবহার করে আমরা হেডিংটিকে আলাদা ভাবে মার্ক করতে পারি, এবং পরে এই এট্রিবিউট ব্যবহার করে হেডিংটিকে আলাদা ভাবে স্টাইল করতে পারি । অর্থাৎ আইডি এট্রিবিউট ব্যবহার হয় যে কোন ইলিমেন্টকে সিলেক্ট করবার কাজে । 
		Class<br>
		Example:<br>
		<h1 class='heading'>
    This is heading one with class attribute
    </h1>
এটিও ব্যবহার হয় ইলিমেন্টকে সিলেক্ট করবার জন্যে, তবে এটির নৃর্দিষ্টতা আইডি এট্রিবিউট থেকে কম । এটি সর্ম্পকে আমরা পরে বিস্তারিত আলোচনা করব ।
  • সাধারন ভাবে প্রতিটি হেডিং লেভেল এর স্টাইল আলাদা আলাদা, তবে এই স্টাইল শুধুমাত্র ফন্ট এর সাইজ এর মধ্যে সীমাবদ্ধ, এবং বিভিন্ন ব্রাউজারে এটি বিভিন্ন রকমের । হেডিং লেভেলের ডিফল্ট স্টাইল সিএসএস দ্বারা পরিবর্তন করা যায়, যা আমরা পরে আলোচনা করব ।
  • এখন আমরা আমদের কোড এডিটরে নিচের কোড টাইপ করি এবং ব্রাউজারে সেটিকে ওপেন করি ।
<h1>This is heading one</h1>
<h2>This is heading two</h2>
<h3>This is heading three</h3>
<h4>This is heading four</h4>
<h5>This is heading five</h5>
<h6>This is heading six</h6>

Figure: 6

Html , Web Development