এইচটিএমএল টিউটোরিয়াল | ভূমিকা (HTML Tutorial in Bangla | Introduction)
- এইচটিএমএল (HTML) এর অর্থ হচ্ছে HyperText Markup Language. এটা কোন প্রোগ্রামিং ল্যাংগুয়েজ নয়, মার্কআপ ল্যাংগুয়েজ।
- ওয়েব ডেভেলপার হতে হলে এই ল্যাংগুয়েজ টি সবার আগে ভালভাবে শিখতে হবে।তবে এটা শেখা খুব সহজ।
- এটা শিখলেই আপনি একটা ওয়েব পেজ তৈরী করতে পারবেন। এরপর যদি সিএসএস শেখেন তাহলে ঐ পেজটিতে আরেকটু প্রান দিতে পারবেন
- তারপর জাভাস্ক্রিপ্টের পালা, জাভাস্ক্রিপ্ট শিখে এর এপ্লিকেশন করলে আপনার ঐ ওয়েব পেজটি ডাইনামিক হওয়া শূরু হল। সবশেষে পিএইচপি + ডেটাবেস শিখলে আপনি পূর্নাঙ্গ ডেটাবেস Driven ওয়েবসাইট তৈরী করতে পারবেন।
যে জিনিস লাগবে এইচটিএমএল শিখতে (অর্থ্যাৎ এইচটিএমএল কোড কোথায় লিখবেন)
নোটপ্যাড। Notepad open করে তৈরী হোন। যেহেতু নতুন তাই নোটপ্যাড দিয়েই শুরু করুন পরে অন্য কোন এডভান্সড এডিটরে সুইচ করবেন যেমন Netbeans বা Dreamweaver. আর যদি ড্রিমওয়েভার এ কাজের অভিজ্ঞতা থাকে তাহলে তাহলে এখনই শুরু করতে পারেন। উইন্ডোজে বাই ডিফল্ট যে নোটপ্যাড টি থাকে সেটা দিয়ে কোড করে কোন মজা বা সুবিধা কিছুই পাবেননা। তবে এরকমই একটা হালকা নোটপ্যাড আছে নাম "Notepad++" এখানে প্রচুর সুবিধা পাবেন এবং এটা প্রফেশনাল কোড লেখার জন্য নি:সন্দেহে ব্যবহার করতে পারেন। এই যে ডাউনলোড লিংক
এইচটিএমএল শিখতে যে শব্দগুলি ভালভাবে জানা দরকার-
এ শব্দগুলি সবসময় আসবে এবং এগুলির পরিষ্কার ধারনা থাকতে হবে।
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>
প্রথম লাইনটি <!DOCTYPE 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 আসার পর এখনতো এটাই বেশি ব্যবহার করা হচ্ছে বিশ্বের ওয়েবজুড়ে।
আমরা এইচটিএমএল ৫ এরও মুল বিষয়াদি পাশাপাশি আলোচনা করে যাব।
এর আগে এইচটিএমএল ট্যাগ নিয়ে আলোচনা করলাম। একটা start tag (যেমন <div>) এবং end tag (যেমন </div>) এর মাঝে যা থাকে তা সহ পুরোটি একটা এলিমেন্ট। একটা এলিমেন্টের ভিতর ট্যাগের মতই এক বা একাধিক এলিমেন্ট থাকতে পারে বা থাকে (এটাকে nested এলিমেন্ট বলে)। নিচের উদাহরনটি দেখুন
1.<!DOCTYPE html>2.<html>3.<head> </head>4.<body>5.<h1>Webcoachbd demo heading</h1>6.<p>demo content goes here.</p>7.</body>8.</html>
এখানে <html> </html> এর ভিতর যত কিছু আছে সব নিয়ে এটা একটা html এলিমেন্ট এরুপ body একটা এলিমেন্ট। একইভাবে বাকিগুলিও এক একটি এলিমেন্ট।
এলিমেন্টের ভিতর এলিমেন্ট থাকতে পারে আবার যেমন <h1></h1> এর ভিতর কোন এলিমেন্ট নেই, যে লেখাটি আছে সেটি হচ্ছে এর কনটেন্ট। তাই <h1></h1> এর ভিতরের লেখাটিসহ এটা h1 এলিমেন্ট।
এই উদাহরনটি DOC type এও দেয়া আছে, আমাদের অনলাইন এডিটরে কোডটি পেস্ট করে দেখতে পারেন বা নোটপ্যাডে লিখে .html এক্সটেনশন (যেমন index.html বা test.html) দিয়ে সেভ করে ব্রাউজারে খুলুন, এটিই হচ্ছে আউটপুট, একটা বেসিক এইচটিএমএল ডকুমেন্ট বা একটা ওয়েব পেজ।
এই উহরনটিতে মোট ৫টি এলিমেন্ট আছে html এলিমেন্ট, head এলিমেন্ট, body, h1 এবং p এলিমেন্ট।
* ট্যাগের মত এখানে html এলিমেন্টের চাইল্ড এলিমেন্ট হচ্ছে বাকি সবগুলি এলিমেন্ট। আবার body হচ্ছে প্যারেন্ট এবং এর চাইল্ড হচ্ছে h1 ও p এলিমেন্ট। যে এলিমেন্টের ভিতর অন্য এলিমেন্ট থাকে সেটা হচ্ছে প্যারেন্ট এবং ভিতরের গুলি চাইল্ড এলিমেন্ট।
* ট্যাগগুলির শব্দগুলি ছোটহাতের অক্ষরে লিখতে হবে, যেমন <body> এভাবে না দিয়ে <BODY> এভাবে দিলে এটা একটা গ্রামাটিকাল ভুল। সাথে সাথে end tag টিও দিতে হবে নাহলে একই ভুল হবে।
** যত এলিমেন্ট লেখি না কেন সব body এলিমেন্টের ভিতরই লিখতে হবে, বাকি এলিমেন্ট যেমন head ইত্যাদির ভিতর শুধু নির্দিষ্ট কিছু এলিমেন্ট লেখা যায়। ব্রাউজারে শুধু ঐটুকুরই আউটপুট আসে যেটা body এলিমেন্টের ভিতর থাকে।
Notepad++ এ বাংলা লিখবেন কিভাবে??
++++++++++++++++++++++++++++++
খুব সহজ। কোড লেখার আগে নোটপ্যাডের "Encoding" মেনু থেকে ইউনিকোড সেটিং সিলেক্ট করে দিতে হবে। তাহলে এবার বাংলা লিখলে ব্রাউজারে ঠিক ঠিক আউটপুট দেখতে পাবেন।
ব্লক লেভেল এবং ইনলাইন এলিমেন্ট
=========================
দুই ধরনের এলিমেন্ট আছে
ব্লকলেভেল এলিমেন্ট : যে এলিমেন্টগুলি বাই ডিফল্ট তার ডানে বামে পুরো জায়গা দখল করে থাকে সেগুলিকে ব্লক লেভেল এলিমেন্ট বলে। অন্যভাবে বলা যায় যে, যে এলিমেন্টগুলি শুরু হয় নতুন লাইনে (যখন ব্রাউজারে প্রদর্শন করবে) সেগুলি ব্লক লেভেল এলিমেন্ট।
div, p, h1, ul, li ইত্যাদি ব্লকলেভেল এলিমেন্ট।
ইনলাইন এলিমেন্ট : যে এলিমেন্টগুলির কারনে নতুন লাইন শুরু হয়না সেগুলি ইনলাইন এলিমেন্ট।
a, i, b, span, strong ইত্যাদি ইনলাইন এলিমেন্ট।
01.<!DOCTYPE html>02.<html>03.<head>04. 05.</head>06.<body>07. 08.<h1>I am a block level element</h1>09. 10.<p>I am block level element too</p>11. 12.<strong>I am inline element</strong>13.<a href="http://www.webcoachbd.com">"a" is a inline element </a>14. 15.</body>16.</html>
আমরা যেকোন একটা এইচটিএমএল ডকুমেন্ট দেখি সেখানে অবশ্যই ট্যাগ থাকে। যেমন নিচের ডকুমেন্ট টি দেখুন এখানে <html>, <head>, </head>, <body> ইত্যাদি এক একটি ট্যাগ।
সোজা কথায় less than (<) চিহ্ন এবং greater than (>) চিহ্ন দিয়ে মোড়ানো একটা শব্দকে (যেটা এইচটিএমএল অনুমোদিত) ট্যাগ বলে। যেমন html শব্দটি এই দুই চিহ্ন দিয়ে মুড়িয়ে যখন HTML ডকুমেন্টে লিখি তখন এটার নাম html ট্যাগ। এরুপ শত শত ট্যাগ আছে এইচটিএমএল এ। যেমন প্যারাগ্রাফ ট্যাগ <p></p>, হেডিং <h1></h1> ট্যাগ ইত্যাদি।
01.<!DOCTYPE html>02.<html>03.<head>04.<title>HTML Tag tutorial in Webcoachbd</title>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>
প্রায় সব ট্যাগেরই একটা সমাপ্তি ট্যাগ থাকে যেমন উপরে <html> ট্যাগটির সমাপ্তি ট্যাগ (closing tag বলা হয়) হচ্ছে </html> আবার <h1> এর ক্লজিং ট্যাগ হল </h1> এভাবে বাকি সবগুলি।
টেকনিকাল শব্দ যেটা ব্যবহৃত হয় সেটা হচ্ছে শুরুর ট্যাগটিকে বলে opening tag বা start tag আর শেষের ট্যাগটিকে বলে closing tag বা end tag. দুটোই একই শুধু ক্লজিং ট্যাগে একটা ব্যাকস্লাস (/) চিহ্ন বেশি থাকে।
এই ওপেনিং এবং ক্লজিং ট্যাগের ভিতর কনটেন্ট দিতে হয়। যেমন উপরে দিয়েছি।
** এই ট্যাগই হচ্ছে এইচটিএমএল এর মুল জিনিস। শত শত ট্যাগ আছে, যত বেশি মনে রাখতে পারবেন ততই দ্রুত কাজ করতে পারবেন। তবে অনেকদিন ধরে কাজ করলে বেশিরভাগ প্রয়োজনীয় ট্যাগগুলি মুখস্থই থাকে।
** কিছু কিছু ট্যাগ আছে এগুলির ক্লজিং ট্যাগ নেই যেমন ইনপুট ট্যাগ, ইমেজ ট্যাগ ইত্যাদি। এই ট্যাগগুলি সামান্য একটু ভিন্ন।
1.<img src="/path/to/image.jpg" alt="an_image"/>2.<input type="submit" value="Save"/>
দেখুন ইমেজ ট্যাগ শুরু হয়েছে <img এভাবে আর শেষ হয়েছে /> এই চিহ্ন দিয়ে। ইনপুট ট্যাগটিও তদ্রুপ। আর মাঝে যে জিনিসগুলি দেখছেন (src, type ইত্যাদি) এগুলি সংশ্লিষ্ট ট্যাগটির এট্রিবিউট।
* প্রতিটি ট্যাগেই নানান ধরনের এট্রিবিউট ব্যবহার করা যায়। এট্রিবিউট টিউটারিয়াল
* প্রত্যেকটি ট্যাগরই কাজ নির্দিষ্ট করা আছে যেমন আপনার এইচটিএমএল ডকুমেন্টে আপনি যদি প্যারাগ্রাফ দিতে চান তখন <p></p> ট্যাগের ভিতর তা দিতে হবে, হেডিং দিলে <h1></h1> ট্যাগের ভিতর দিতে হবে (বড় ফন্টের হেডিং হলে <h1>, সাইজ অনুযায়ী <h6> পর্যন্ত আছে)। টেক্সট ফিল্ড দিতে হলে input ট্যাগ, ছবি দিতে চাইলে <img ট্যাগ, ব্রাউজারের টাইটেল বারে দেখানোর জন্য আছে <title></title> ট্যাগ ইত্যাদি।
* উপরে যে ডকুমেন্টটি দিয়েছি সেখানে <html></html> কে বলে প্যারেন্ট ট্যাগ পুরো ডকুমেন্ট টির জন্য কেননা পুরো ডকুমেন্টে যত ট্যাগ আছে সবগুলি এর ভিতরে রাখা হয়েছে। ভিতরের ব্যবহৃত ট্যাগগুলি হল এর চাইল্ড ট্যাগ। একইভাবে head ট্যাগের চাইল্ড ট্যাগ হল title ট্যাগ কিন্তু title ট্যাগের কোন চাইল্ড ট্যাগ নেই। আবার দেখুন body হল প্যারেন্ট ট্যাগ এবং এর চাইল্ড ট্যাগ এখানে p এবং h1
এইচটিএমএল এর প্রতিটি এলিমেন্ট ব্রাউজারকে এক একটা নির্দেশনা দেয় যে তার ভিতরে থাকা কনটেন্টকে কিভাবে প্রদর্শন করবে। যেমন <hr/> এলিমেন্ট ব্রাউজারকে বলে একটা আড়াআড়ি লাইন দেখাও। আবার <h1></h1> বলে একটা বড় ফন্টের শিরোনাম তৈরী কর ইত্যাদি।
অনেক এলিমেন্ট আছে যারা ব্রাউজারকে যেটা বলে সেটার সাথে আরো নতুন কিছু যোগ করে দেয়া যায়। এই যে একটা এলিমেন্টে নতুন তথ্য যোগ করলেন এটাকে সেই এলিমেন্টের এট্রিবিউট বলে। h1 এলিমেন্ট যখন ব্রাউজারকে বড় ফন্টের শিরোনাম প্রদর্শন করতে বলবে তখন এট্রিবিউট দিয়ে সেই শিরোনামটির রং কি হবে তাও বলে দিতে পারেন। যেমন
1.<h1 style="color:yellow;">HTML Attribute tutorial</h1>
অনলাইন এডিটর এখানে গিয়ে কোডটুকু দিয়ে "Edit and Hit" বাটনে ক্লিক করুন দেখবেন হলুদ রংয়ের শিরোনাম আউটপুট আসবে। এখানে "style" হচ্ছে একটা এট্রিবিউট এবং "color:yellow;" হচ্ছে এট্রিবিউটটির মান। যদি এট্রিবিউটটি ব্যবহার না করেন তাহলে কিন্তু শিরোনামটির রং পরিবর্তন হতনা বাই ডিফল্ট কালো থাকতো।
অধিকাংশ ট্যাগেই এরুপ অনেক ধরনের এট্রিবিউট যোগ করা যায়।
** এট্রিবিউট লেখার নিয়ম হচ্ছে প্রথমে এট্রিবিউটটির নাম এরপর সমান চিহ্ন (=) দিয়ে কোটেশনের ("" বা '') ভিতর এর মান। (সব ছোট হাতের অক্ষরে)
মুলত ৩ ধরনের এট্রিবিউট গ্রপ আছে যেগুলি একটা এলিমেন্টে থাকতে পারে। এর মধ্যে কোর এট্রিবিউট (core attribute) এর ব্যবহার সবচেয়ে বেশি দেখবেন।
id, class, title, style হল কোর এট্রিবিউট। এরপর থেকে পরের টিউটোরিয়ালগুলিতে এই এট্রিবিউটগুলিকে গ্লোবাল এট্রিবিউট বলা হবে। HTML 5 এ বেশকিছু নতুন এট্রিবিউট এসেছে যেমন contenteditable, contextmenu, draggable, dropzone ইত্যাদি নিয়ে পরে বিস্তারিত আলোচনা হবে। এখানে মনে রাখুন গ্লোবাল এট্রিবিউট কয়েকটি HTML এলিমেন্ট ছাড়া সব এলিমেন্টে ব্যবহার করা হয় বা যায়।
ইন্টারন্যাশলাইজেশান এট্রিবিউট হচ্ছে dir, lang এগুলি
এবং UI event এট্রিবিউট আছে যেমন onclick, ondoubleclick, onmouseout, onkeypress ইত্যাদি। এর থেকে সব টিউটোরিয়ালে এগুলিকে ইভেন্ট এট্রিবিউট বলা হবে। তবে একটা জিনিস মনে রাখুন যে ইভেন্ট এট্রিবিউটগুলি শুধু জাভাস্ক্রিপ্ট এর কাজ এর জন্য ব্যবহৃত হয়।
id, class দিয়ে এলিমেন্টের নাম দেয়া যায় পরে সেই নাম ধরে সিএসএস স্টাইলিং করা হয়। এগুলি সিএসএস টিউটোরিয়ালে আছে।
title এট্রিবিউট কোন এলিমেন্টের দিলে এটা দিয়ে টুলটিপ আকারে তথ্য প্রদর্শন করা যায় যেমন
1.<h2 title="Hello Webcoachbd">Bangladesh is a country of natural beauty</h2>
প্রদর্শন
Bangladesh is a country of natural beauty
এর উপরে মাইস নিয়ে যান তাহলে "Hello Webcoachbd" লেখাটি টুলটিপ আকারে দেখতে পাবেন।
style এট্রিবিউটতো প্রথম উদাহরনেই দেখালাম, এখানে শুধু রং পরিবর্তন করেছি আপনি চাইলে আর অনেক সিএসএস প্রোপার্টিজ ব্যবহার করতে পারেন।
অন্যান্য এট্রিবিউটগুলি নিয়ে আলোচনা করলাম না কিন্তু যখনি কোন টিউটোরিয়ালে ব্যবহার করব, আলোচনা করে দেব।
About Author
Online helpers 4u Created By Abhiram - Writer and author of This blog belong to a simple and Not much-educated society but I get all knowledge all from Internet and web community college teachers and From Books In the library. I believe that I have much knowledge to give you more knowledge about internet and web developm. I Believe in Simple Living and High power Of thinking and also Sharing because sharing is caring.
