HTML শিখুন :: HTML Tutorial - পর্ব-১ ::

কি কাজে লাগে?

HTML মূলতঃ ওয়েব পেজ তৈরীর কাজে লাগে। আপনি হয়তো ইতোমধ্যেই Microsoft Frontpage বা Macromedia Dearweaver দিয়ে আপনার পুরো ওয়েব সাইটটি তৈরী করে ফেলেছেন, অথচ আপনার HTML ল্যাংগুয়েজ সম্পর্কে খুব একটা ভাল ধারণা নেই। এরকম অনেকে আছেন যারা কিনা HTML ল্যাংগুয়েজ টিকমত পারেনা, অথচ তারা উল্লিখত সফটওয়্যারগুলি ব্যবহার করে সুন্দর সুন্দর অনেক ওয়েব সাইট তৈরী করে ফেলেছেন।
তাহলে প্রশ্ন হল, আপনিই বা কেন এত কষ্ট করে HTML শিখতে যাবেন? কারণ হল, আপনি সবসময় উল্লেখিত সফটওয়্যারগুলো দিয়ে পার পেয়ে যাবেন তা কিন্তু নয়, মাঝে মধ্যে আটকে যাবেন। তাছাড়া কিছু কিছু কাজ ম্যানুয়ালি করতে হয়। তা না হলে আপনার সমস্যার সমাধান খুঁজতে ইন্টারনেটে হাতড়ে বেড়াতে হবে। তার চাইতে নিজের সমস্যা নিজেই সমাধান করে ফেলা ভাল নয় কি? পাশাপাশি নতুন একটি বিষয় সম্পর্কে ও আপনার জানা হল।

আপনার ন্যুনতম যোগ্যতাঃ

বিভিন্ন ওয়েব ব্রাউজার দিয়ে বিভিন্ন ধরণের ওয়েব সাইট ব্রাউজ করতে পারা, বিভিন্ন ওয়েব সাইটে নিজেই নিজের রেজিষ্ট্রেশন করতে পারা, ইমেইল চেক করতে পারা এবং ইন্টারনেট সম্পর্কে মোটামুটি একটা ধারণা থাকা। এর বাইরে আপনাকে অন্তন উইন্ডোজ অপারেটিং সিস্টেমের যেকোন একটি ভার্সন (উইন্ডোজ ৯৫,৯৮, এমই, এনটি ৪, ২০০০, এক্সপি, ২০০৩ ইত্যাদি) ব্যবহারে অভ্যস্ত হতে হবে। আর আপনি যদি ইউনিক্স (লিনাক্স, ম্যাক, সোলারিস, বিএসডি ইত্যাদি) অপারেটিং সিস্টেমের ব্যবহারকারী হন, তাহলে তো কোন কথাই নেই।

সূচনাঃ

HTML এর পূর্ন রূপ হচ্ছে Hyper Text Markup Language. যদিও HTML কোন পূর্ণাঙ্গ প্রোগ্রামিং ল্যাংগুয়েজ নয়, তারপরও ওয়েব ব্রাউজারে যেকোন পেজের রেন্ডারিং HTML ল্যাংগুয়েজেই হয়, তা সে ASP, PHP, Could Fusion, JSP বা CGI, যে প্রযুক্তি দিয়েই তৈরী হোক না কেন। আপনি কোন ওয়েব সাইটে গিয়ে আপনার ওয়েব ব্রাউজারের ভিউ মেনু থেকে পেজ সোর্স এ ক্লিক করে ওয়েব পেজটির সোর্স কোড দেখুন। <> এবং </> কিছু চিহ্নের মাঝে কিছু ইংরেজী শব্দ দেখতে পাবেন। এদেরকে HTML ট্যাগ বলা হয়। HTML ল্যাংগুয়েজের হাতে গোনা অল্প কিছু ট্যাগ রয়েছে, যা আপনি একটু চেষ্টা করলেই করায়ত্ত করে ফেলতে পারবেন। আমি এই টিউটোরিয়ালটি HTML এর উৎপত্তি, এর জনক ইত্যাদি বিভিন্ন তত্বীয় বিষয় নিয়ে কোন আলোচনা করতে যাব না। আপনারা এর ইতিহাস জানতে চাইলে দয়া করে এ বিষয়ের উপর কোন বই পড়ে নেবেন। HTML এর উপর আপনি পুরোপুরি এক্সপার্ট হতে চাইলে “Dynamic HTML: The Definitive Reference, Second Edition- O’reilly” এই বইটি পড়ে দেখতে পারেন। এই বইটিতে HTML, CSS, Java Script এবং  DOM (Document Object Model) সব বিষয়েই উদাহরণ সহ বেশ বিস্তারিত আলোচনা করা আছে। তো চলুন এবার শুরু করা যাক।

যা যা প্রয়েজন হবেঃ

একটি সাধারণ টেক্সট এডিটর যেমন, নোটপ্যাড। আপনার অপারেটিং সিস্টেম যদি ইউনিক্স হয় (লিনাক্স, ম্যাক, সোলারিস ইত্যাদি) তাহলে জি-এডিট, কে-এডিট, এক্স-এডিট, এন-এডিট ইত্যাদির মধ্য থেকে যেকোনটি ব্যবহার করতে পারেন। আর প্রয়োজন হবে একটি ওয়েব ব্রাউজারের, যেমন- ইন্টারনেট এক্সপ্লোরার। আপনার অপারেটিং সিস্টেম যদি ইউনিক্স হয় (লিনাক্স, ম্যাক, সোলারিস ইত্যাদি) তাহলে মজিলা, অপেরা, নেটস্কেপ নেভিগেটর, গ্যালিয়ন, ইপিফানি, কনকরার ইত্যাদির মধ্য থেকে যেকোনটি ব্যবহার করতে পারেন। উল্লেখিত সফটওয়্যার সমূহ আপনার পিসিতে ইনস্টলড অবস্থাতেই পাবেন আশা করি।

ইন্টারনেট নিয়ে কিছু কথাঃ

আপনি আপনার ওয়েব ব্রাউজারে বিভিন্ন ওয়েব সাইটের এড্রেস লিখে ব্রাউজ করছেন, আপনার ওয়েব ব্রাউজারটি অন্তত বিশ্বস্ততার সাথে আপনাকে সেই ওয়েব সাইটগুলোর হোম পেজ / অন্য কোন পেজ লোড করে দেখাচ্ছ। কখনও ভেবে দেখেছেন কি, কাজগুলো কিভাবে সম্পন্ন হয়? বিভিন্ন ওয়েব সাইটের জন্য নির্দিষ্ট আইপি (ইন্টারনেট প্রটোকল) এ্যাড্রেস থাকে, যেমনটি আপনার নিজের পিসিতেও রয়েছে। গুগলের বর্তমান আইপি এ্যাড্রেস হল 64.233.189.104 এবং 216.239.57.99 (ইংরেজী ভার্সনের ক্ষেত্রে প্রযোজ্য)। চাইলে এই আপনি এ্যাড্রেস দুইটি আপনার ওয়েব ব্রাউজারে দিয়ে ব্রাউজ করে দেখতে পারেন, গুগর সার্চ ইঞ্জিনের হোম পেজ চলে আসবে। এখন কথা হচ্ছে, আপনাকে যদি এভাবে বিভিন্ন ওয়েব সাইটের আইপি এ্যাড্রেস মুখস্ত করে ব্রাউজ করতে হত, তাহলে অবস্থাটা কি দাঁড়াতো? এই অবস্থার কথা চিন্তা করেই আইসিএএনএন (ইন্টারনেট কর্পোরেশন ফর এ্যাসাইনড নেইমস্‌ এন্ড নাম্বারস্‌) প্রত্যেকটি ওয়েব সাইটের আইপি এ্যাড্রেসের বিপরীতে একটি করে নাম দেওয়ার ব্যবস্থা করেছে, যা ডোমেইন নেম হিসেবে ব্যাপক পরিচিত। তাই আমরা এখন 68.142.226.38 না লিখে ইয়াহু.কম লিখি বা 207.68.171.245 না লিখে এমএসএন.কম লিখি।

ছোট এবং মাঝারি ধরণের ওয়েব সাইটগুলো বিভিন্ন সেন্ট্রাল ওয়েব সার্ভারে ওয়েব স্পেস কিনে অবস্থান করে, আর মাইক্রোসফট, এ্যাপেল, ইয়াহু ইত্যাদি বড় বড় প্রতিষ্ঠানগুলোর নিজেদেরই শক্তিশালী ওয়েব সার্ভার রয়েছে। ওয়েব সার্ভারটি আবার কি জিনিস (খায় নাকি মাথায় দেয়)? ওয়েব সার্ভার হল আপনার আমার কম্পিউটারের মতই একটি কম্পিউটার, কিন্তু অনেক বেশি শক্তিশালী এবং গতিশীল। এদের ষ্টোরেজ ক্যাপাসিটি অনেক বেশি থাকে, কারণ বিভিন্ন ওয়েব সাইটের কাছে তারা স্পেস বিক্রি করে থাকে। এদের নামেই অনুমেয় যে, এদের কাজই হলো সার্ভ করা। একটি ওয়েব সার্ভারে প্রতি মিনিটে কয়েক হাজার এমনকি কয়েক লক্ষও রিকোয়েষ্ট একসঙ্গে আসতে পারে, যা ওয়াব সার্ভারটি সামাল দিতে সক্ষম এবং রিকোয়েস্টগুলো পূর্ণ করতে সক্ষম। আপনার আমার কম্পিউটারকে ওয়েব সার্ভার হিসেবে ব্যবহার করলে কিছুক্ষণের মধ্যেই হ্যাং/ক্র্যাশ করে বসবে। যাই হোক আপনি যখন কোন ওয়েব সাইট ব্রাউজ করতে যান তখন আপনার ওয়েব ব্রাউজারটি আপনার আইএসপি (ইন্টারনেট সার্ভিস প্রোভাইডার) ঘুরে উক্ত ডোমেইন নেম সম্বলিত ওয়েব সাইটটি যে ওয়েব সার্ভারে রয়েছে, তার কাছে পেজটি রিকোয়েষ্ট করে। ওয়েব সার্ভার রিকোয়েস্ট রিসিভ করার পর উক্ত ওয়েব সাইটটির হোম পেজ বা আপনি যদি কোন নিদিষ্ট ওয়েব পেজের জন্য রিকোয়েস্ট করে থাকেন, তা খুঁজে নিয়ে ওয়েব ব্রাউজারের কাছে পাঠায় এবং সাথে একটি ম্যাসেজ পাঠায় “২০০ ও.কে”, যা ওয়েব ব্রাউজারে আমাদের দেখায় না। এরপর ওয়েব ব্রাউজার পেজটিকে HTML এ রেন্ডার করে আপনার সামনে উপস্থাপন করে। অনেক সময় রিকোস্টেড পেজটি ওয়েব সার্ভর খুঁজে না পেলে একটি এরর ম্যাসেজে পাঠায়, “৪০৪ পেজ নট ফাউন্ড” যা হয়তো ইতোমধ্যে আপনারা দেখে থাকবেন। নিচের চিত্রটি একটু মনোযোগ দিয়ে লক্ষ করুন।

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

বেসিক ওয়েব পেজ স্ট্র্যাকচারঃ

HTML পেজ, যাকে আমরা সচরাচর ওয়েব পেজ হিসেবে সম্বোধন করে থাকি, মূলতঃ দুটি অংশে বিভক্ত। head এবং body. এই অংশগুলো দু’টি এ্যাঙ্গেল ব্রাকেট দিয়ে আবদ্ধ থাকে ঠিক এইভাবে <head> এবং <body>. এদেরকে হেড ট্যাগ এবং বডি ট্যাগ নামে সম্বোধন করা হয়। HTML এ কোন ট্যাগ শুরু করলে তা ক্লোজ বা বন্ধ করে দিতে হয় (বিশেষ কিছু ট্যাগের ক্ষেত্রে ব্যতিক্রম রয়েছে)। হেড ট্যাগ এবং বডি ট্যাগ ক্লোজ বা বন্ধ করতে চাইলে লিখতে হবে </head> এবং </body>. অর্থাৎ ক্লোজ করার সময় একটি / (ফ্রন্ট স্ল্যাশ) লাগিয়ে দিলেই হবে। যে কোন HTML পেজ এর শুরু হয় <HTML> ট্যাগ দিয়ে এবং শেষ হয় </HTML> ট্যাগ দিয়ে। তাহলে এবার আমরা খুবই সাধারণ একটি HTML পেজের স্ট্র্যাকচার দেখে নেই।

<html>

<head>

Here should be other header tags

</head>

<body>

Here should be the body text & other necessary tags

</body>

</html>

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

এখানে আমি নতুন একটি ট্যাগ ব্যবহার করেছি, <title> ট্যাগ। এই ট্যাগটি শুরু করে তারপর মাঝখানে কিছু লিখলে, তা ওয়েব ব্রাউজারের টাইটেল বারে দেখা যাবে। এরপর অবশ্যই title ট্যাগ ক্লোজ বা বন্ধ করে দিতে হবে। এখানে বলে নেওয়া ভাল যে, HTML ইংরেজী ছোট হাতের অক্ষর আর বড় হাতের অক্ষরের কোন পার্থক্য করেনা, যা প্রোগ্রামিং ল্যাংগুয়েজের ক্ষেত্রে প্রযোজ্য। <body> এবং </body> ট্যাগের মাঝখানে কিছু লিখলে, তা ওয়েব ব্রাউজারের বডিতে, অর্থাৎ ওয়েব পেজের টেক্সট হিসেবে দেখায়। এবার আপনি আপনার টাইপ করা ফাইলটি আপনার হার্ড ড্রাইভের সুবিধাজনক কোন স্থানে আপনার পছন্দনীয় কোন নামে .html এক্সটেনশন দিয়ে সেভ করুন। যেমন ধরুন আপনি সেভ করার সময় ফাইলটির নাম রাখলেন, “My First Web Page”, তাহলে এর সঙ্গে .html যোগ করুন। তাহলে এবার পুরো ফাইলটির নাম দাঁড়াচ্ছে “My First Web Page.html”। এবার ডাবল ক্লিক করে ফাইলটি ওপেন করুন। নিচের চিত্রটির মত আউটপুট পাবেন।

উল্লেখ্য যে, আপনি ইচ্ছে করলে .html এক্সটেনশন এর পরিবর্তে .htm এক্সটেনশন ব্যবহার করতে পারবেন। দুটোর মধ্যে কোন পার্থক্য নেই।

আজ এ পর্যন্তই থাক। ইনশাআল্লাহ, পরবর্তী টিউটোরিয়ালে আবার দেখা হবে। টিউটোরিয়ালটি সম্বন্ধে আপনার মূল্যবান মতামত আশা করছি।