Breaking

Post Top Ad

Your Ad Spot

Monday, October 14, 2019

এইচটিএমএল টিউটোরিয়াল (পর্ব ১)


এইচটিএমএল (HTML) এর অর্থ হচ্ছে Hyper Text Markup Language. এটা কোন প্রোগ্রামিং ল্যাংগুয়েজ নয়, মার্কআপ ল্যাংগুয়েজ।

ওয়েব ডেভেলপার হতে হলে এই ল্যাংগুয়েজ টি সবার আগে ভালভাবে শিখতে হবে।তবে এটা শেখা খুব সহজ।


এটা শিখলেই আপনি একটা ওয়েব পেজ তৈরী করতে পারবেন। এরপর যদি সিএসএস শেখেন তাহলে ঐ পেজটিতে আরেকটু প্রান দিতে পারবেন

তারপর জাভাস্ক্রিপ্টের পালা, জাভাস্ক্রিপ্ট শিখে এর এপ্লিকেশন করলে আপনার ঐ ওয়েব পেজটি ডাইনামিক হওয়া শূরু হল। সবশেষে পিএইচপি + ডেটাবেস শিখলে আপনি পূর্নাঙ্গ ডেটাবেস Driven ওয়েবসাইট তৈরী করতে পারবেন।

যে জিনিস লাগবে এইচটিএমএল শিখতে (অর্থ্যাৎ এইচটিএমএল কোড কোথায় লিখবেন)

নোটপ্যাড। Notepad open করে তৈরী হোন। যেহেতু নতুন তাই নোটপ্যাড দিয়েই শুরু করুন পরে অন্য কোন এডভান্সড এডিটরে সুইচ করবেন যেমন Netbeans বা Dreamweaver. আর যদি ড্রিমওয়েভার এ কাজের অভিজ্ঞতা থাকে তাহলে তাহলে এখনই শুরু করতে পারেন। উইন্ডোজে বাই ডিফল্ট যে নোটপ্যাড টি থাকে সেটা দিয়ে কোড করে কোন মজা বা সুবিধা কিছুই পাবেননা। তবে এরকমই একটা হালকা নোটপ্যাড আছে নাম "Notepad++" এখানে প্রচুর সুবিধা পাবেন এবং এটা প্রফেশনাল কোড লেখার জন্য নি:সন্দেহে ব্যবহার করতে পারেন।

এইচটিএমএল শিখতে যে শব্দগুলি ভালভাবে জানা দরকার-

এইচটিএমএল এলিমেন্ট (Element)
এইচটিএমএল ট্যাগ (Tag)
এইচটিএমএল অ্যাট্রিবিউট (Attribute)
এ শব্দগুলি সবসময় আসবে এবং এগুলির পরিষ্কার ধারনা থাকতে হবে।

HTML, XHTML এবং HTML5 HTML এর সর্বশেষ ভার্সন হচ্ছে HTML5। এইচটিএমএল ৫ এ এক্সএইচটিএমএল সকল নিয়ম অনুসরন করা হয়। কাজেই HTML 5 শিখলেই আগের ভার্সনগুলি অটোমেটিক শেখা হয়ে যাবে। তাই আমরাও ঐভাবে টিউটোরিয়ালগুলি দেব।

* W3C নামের এই সংস্থাটি HTML তৈরী এবং ম্যানেজমেন্ট করে।

* HTML 5 মুলত HTML ই তবে এখানে নতুন নতুন অনেক ট্যাগ এবং নিয়ম যুক্ত হয়েছে যেগুলির বর্ননা আমরা পরবর্তী টিউটোরিয়ালগুলিতে প্রয়োজন অনুসারে দিয়ে দেব।

নিচে একটা সাধারন এইচটিএমএল ডকুমেন্ট দেয়া হল এবং এর প্রতিটি অংশের বিস্তারিত বর্ননা করা হচ্ছে

01.<!DOCTYPE html>
02.<html>
03.<head>
04.<!--- JS/CSS file is to be added here -->
05. 
06.</head>
07.<body>
08. 
09.<h1>Webcoachbd demo heading</h1>
10. 
11.<p>demo content goes here.</p>
12. 
13.</body>
14.</html>

প্রথম লাইনটি হচ্ছে ডকুমেন্টটি কি ধরনের তা বোঝানোর (ব্রাউজারকে) জন্য দেয়া হয়। এইচটিএমএল এর কোন ভার্সন ব্যবহার করবেন সেটার উপর ভিত্তি করেই এই ডিক্লেয়ারেশন টি দেয়া হয়। যেমন উপরের ডকুমেন্ট টি এইচটিএমএল ৫ এর একটি ডকুমেন্ট । এরুপ যদি এটা XHTML এর ১.০ ভার্সন হতো তাহলে ডিক্লেয়ারেশনটি দিতে হতো এভাবে

1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


এটা হচ্ছে ট্রানজিশনাল অর্থ্যাৎ এইচটিএমএল এর সকল কিছু এই্ ডকুমেন্টে লেখা যাবে সাথে সাথে deprecated এলিমেন্টগুলিও ব্যবহার করা যাবে যেমন font। ফ্রেমসেট ব্যবহার করা যাবেনা।

যাইহোক এভাবে "xhtml1-transitional.dtd" এর জায়গায় "xhtml1-strict.dtd" দিলে deprecated এলিমেন্টগুলি ব্যবহার করা যাবেনা।

** এখন HTML5 আসার পর এগুলি আর সাধারনত ব্যবহার করেনা। HTML 5 এর ডিক্লেয়ারেশন দেয়া হয়।

1.<!DOCTYPE html>
যাইহোক এটা খুব গুরত্বপূর্ন কিছু নয়। কপি করে (X)HTML ডকুমেন্ট লেখার শুরুতে পেস্ট করে দিলেই চলবে। তবে দিতে হবে কেননা না দিলে কিছু কিছূ ব্রাউজারে ঠিকমত আউটপুট আসেনা যেমন ইন্টারন্টে এক্সপ্লোরার (IE)।

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

আমরা এইচটিএমএল ৫ এরও মুল বিষয়াদি পাশাপাশি আলোচনা করে যাব।

No comments:

Post a Comment

Post Top Ad

Your Ad Spot

Pages