ওয়েব ডিজাইন টিউটোরিয়াল [পর্ব-০২] :: এইচটিএমএল সিনট্যাক্স (HTML Syntax)

আসসালামু আলাইকুম । আমাদের আজকের আলোচনার বিষয় এইচটিএমএল সম্পর্কে প্রাথমিক আলোচনা এবং এইচটিএমএল সিনট্যাক্স । আজকের আলোচনার বিষয়টি খুবই গুরুত্বপূর্ণ ।

এইচটিএমএল এর পূর্ণরূপ হচ্ছে Hypertext Markup Language (হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ ) এটা একটা মার্কাআপ ল্যাঙ্গুয়েজ । এইচটিএমএল কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয় । এটা দিয়ে ওয়েবসাইটের কাঠামো গঠন করা হয় । যাইহোক, এইচটিএমএল শেখার প্রয়োজনীয়তা সম্পর্কে আগেই আলোচনা করেছি । এইচটিএমএল এর সর্বশেষ ভার্সন হচ্ছে এইচটিএমএল ৫ । এতে নতুন অনেক ফিচার যোগ করা হয়েছে ।

এইচটিএমএল শিখতে হলে আপনার কম্পিউটার এ একটি ব্রাউজার থাকতে হবে আর একটি টেক্সট এডিটর লাগবে । টেক্সট এডিটর হিসেবে নোটপ্যাড প্লাস প্লাস ব্যবহার করতে পারেন । নোটপ্যাড প্লাস প্লাস ডাউনলোড করতে এখানে ক্লিক করুন ।

এইচটিএমএল এর সিনট্যাক্স

এখন আমি এইচটিএমএল এর গঠন সম্পর্কে আলোচনা করবো । প্রত্যেকটা লাইন বুঝার চেষ্টা করুন । যদি কোন লাইন বুঝতে অসুবিধা হয় তাহলে আমাকে কমেন্ট এর মাধ্যমে জানাবেন । মনে রাখবেন, যদি আজকের পর্ব ভাল করে বুঝতে না পারেন তাহলে আর বাকি পর্বসমূহ বুঝতে পারবেন না ।

এইচটিএমএল শুরু করার জন্য প্রথমেই নিচের কোডটুকু নোটপ্যাড এ লিখুন । কপি করে লিখবেন না নিজের হাতে লিখুনঃ

<!DOCTYPE HTML>
<html>
<head>
<title> This is Page Title </title>
</head>
<body>
Welcome to HTML Tutorial!
</body>
</html>

এটা হচ্ছে এইচটিএমএল এর বেসিক গঠন । এবার কোডটুকু index.html নামে সেভ করুন এবং তা একটি ব্রাউজারে প্রদর্শন করুন । তাহলে দেখতে পারবেন ব্রাউজারে Welcome to HTML Tutorial! লেখাটি প্রদর্শন করেছে ।

কোড বিশ্লেষণ

আমি বুঝতে পারছি আপনারা এখনো হয়ত কিছুই বুঝতে পারেন নি । কোন সমস্যা নেই । আমি এখন প্রতিটি লাইন আপানদের বুঝিয়ে দিচ্ছি ।

১। প্রথম লাইনটি লিখে ব্রাউজারকে বুঝানো হয়েছে যে এটা একটা এইচটিএমএল ডকুমেন্ট । আমরা এইচটিএমএল৫ ব্যবহার করছি তাই আমরা <!DOCTYPE HTML> ব্যবহার করছি । যদি আমরা এইচটিএমএল ৪.০১ ব্যবহার করতাম তাহলে নিচের মত লিখতে হতো;

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

যাইহোক, যেহেতু আমরা এইচটিএমএল ৫ ব্যবহার করছি তাই আমরা শুধু <!DOCTYPE HTML> লিখবো । সব এইচটিএমএল এর শুরুতে এই ডক টাইপ ব্যবহার করতে হবে । অনেকে এইচটিএমএল ডকটাইপ এ গুরুত্ব দেন না । কিন্তু, প্রফেশনাল হতে হলে এ বিষয়টি কখনো এড়িয়ে যাবেন না । কেননা, ডকটাইপ ব্যবহার না করলে কিছু ব্রাউজারে ঠিকমত আউটপুট আসে না । তাই, প্রত্যেক এইচটিএমএল ফাইলের শুরুতে ডকটাইপ ব্যবহার করবেন ।

২ । দ্বিতীয় লাইনটি বুঝানোর আগে আমি আপনাদের কাছে এইচটিএমএল ট্যাগ সম্পর্কে আলোচনা করে নিই ।  উপরের লিখিত html, head, title, body প্রত্যেকটিকে ট্যাগ বলা হয় । একটু লক্ষ্য করে দেখুন ট্যাগ Less Than চিহ্ন দিয়ে শুরু হয় এবং Greater Than চিহ্ন দিয়ে শেষ হয় । তাই, <html>, <head>, <title>, <body> লেখা হয়েছে । প্রায় প্রত্যেকটি ট্যাগ এর শুরু এবং শেষ আছে । তাই, যখন <html> ট্যাগ শুরু হয়েছে তখন ট্যাগটি </html> এভাবে শেষ হয়েছে । ট্যাগ শেষ করার জন্য Less Than চিহ্নের পরে একটা Forward Slash (/) চিহ্ন দিতে হয় । ট্যাগ সরাসরি ব্রাউজারে প্রদর্শন করে না । তাই দেখুন index.html ফাইলটি ওপেন করার পর কোন ট্যাগ ব্রাউজারে প্রদর্শিত হয়নি । শুধু ইলিমেন্টসমূহ ব্রাউজের প্রদর্শিত হয় । এইচটিএমএল ট্যাগ এর মাঝখানে যে টেক্সট থাকে তা হচ্ছে ইলিমেন্ট ।

৩ । দ্বিতীয় লাইনটি হচ্ছে ট্যাগ । সমস্ত এইচটিএমএল কোড <html> ট্যাগ এর মাঝে লিখতে হয় । নবম লাইন এ <html> এর ট্যাগ শেষ করা হয়েছে । <html> ট্যাগ এর দুটি সেকশন রয়েছে একটি হচ্ছে <head> সেকশন এবং অপরটি হচ্ছে <body> সেকশন ।

৪। তৃতীয় লাইনটি হচ্ছে একটি ট্যাগ যা পঞ্চম লাইন এ শেষ হয়েছে । একইভাবে,  <body> একটি ট্যাগ যা পরবর্তীতে ট্যাগ শেষ করা হয়েছে ।

৫ । সপ্তম লাইন এ Welcome to HTML Tutorial! লিখেছি এবং এটা ব্রাউজারে প্রদর্শিত হয়েছে । এটা হচ্ছে এইচটিএমএল ইলিমেন্ট । শুরু করার ট্যাগ এবং শেষ করার ট্যাগ এর মাঝখানে ইলিমেন্ট থাকে এবং ইলিমেন্ট ব্রাউজারে প্রদর্শিত হয় । কিন্তু, ট্যাগ ব্রাউজারে সরাসরি প্রদর্শিত হয় না ।

সবশেষে, আপনি ফাইলটি index.html নামে সেভ করেছেন । এখানে আপনি index লেখার পরিবর্তে যেকোনো টেক্সট লিখতে পারেন । এটা আপনার ইচ্ছা । তবে .html এক্সটেনশন ঠিক রাখতে হবে । অর্থাৎ ফাইলের নামের পর .html থাকতে হবে । অনেকে .html এর পরিবর্তে ভুল করে .txt দিয়ে সেভ করে ব্রাউজারে ওপেন করান । কিন্তু এতে কাজ করবে না ।

আপনি .html এর পরিবর্তে .htm লিখতে পারেন ।

আশা করি কিছুটা বুঝাতে পেরেছি । আপনারা এখন হয়ত ট্যাগ নিয়ে কিছুটা চিন্তিত । কোন সমস্যা নেই । আমি এইচটিএমএল ট্যাগ এবং ইলিমেন্ট নিয়ে পরবর্তী পর্বে বিস্তারিত – ইনশাল্লাহ্‌ ।

সেলফ ওয়ার্ক

আমি এতক্ষন এইচটিএমএল এর পরিচিতি এবং এইচটিএমএল এর সিনট্যাক্স আলোচনা করেছি । আজকের আলোচনার উপর ভিত্তি করে এখন আমি আপনাদের কিছু প্রশ্ন দিচ্ছি, আপনারা টেকটিউনস কমেন্ট এ এসব প্রশ্নের উত্তর দিবেন ।

১ । এইচটিএমএল শিখতে কম্পিউটার এ কি কি থাকতে হবে?

২ । এইচটিএমএল ৪.০১ এ কি ধরনের ডকটাইপ ব্যবহার করা হয়?

৩। এইচটিএমএল ৫ এ কোন ধরনের ডকটাইপ ব্যবহার করা হয়?

৪ । এইচটিএমএল ফাইলের এক্সটেনশন কি?

৫ । .html এর পরিবর্তে কি লেখা যায়?

প্রশ্নের উত্তর পেতে আজকের আলোচনার বিষয়টি মনোযোগ সহকারে পড়ুন ।

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

আগামী চেইন টিউন পাবেনঃ ১৫ এপ্রিল, ২০১৫ (বুধবার)

আগামী চেইন টিউন এ থাকছেঃ এইচটিএমএল ট্যাগ, লাইন ব্রেক-আপ, হেডিং ।

আমার সাথে ফেইসবুক এ যোগাযোগ করতে এখানে ক্লিক করুন ।

ধন্যবাদ সবাইকে আজকের বিষয়টি মনোযোগ সহকারে পড়ার জন্য । ভাল থাকবেন সবাই । আল্লাহ্‌ হাফেজ ।

Level 0

আমি জিহাদুর রহমান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 3 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 51 টি টিউন ও 194 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

Level 0

১। একটি Browser এবং একটি Text Editor
২।
৩।
৪। .html
৫। .html

Level 0

২। “” [ইনভাইটেড কমা বাদ যাবে]
৩। “”

Level 0

দুঃখিত, ২ এবং ৩ নং উত্তরটি আমি কনোভাবে প্রদর্শন করতে পারতেছি না।

১।একটি টেক্সট এডিটর (যেমন- নোটপ্যাড++)এবং একটি ব্রাউজার( যেমনঃমজিলা/ ক্রোম।)
২। ”
৩।
৪।.html
৫।.htm {আলোচনায় এই লাইনে (আপনি .html এর পরিবর্তে .html লিখতে পারেন ।)মনে হয় .htm লিখতে চেয়েছিলেন।}

১।একটি টেক্সট এডিটর (যেমন- নোটপ্যাড++)এবং একটি ব্রাউজার( যেমনঃমজিলা/ ক্রোম।)
২।!DOCTYPE HTML PUBLIC ”
৩।!DOCTYPE HTML
৪।.html
৫।.htm {আলোচনায় এই লাইনে (আপনি .html এর পরিবর্তে .html লিখতে পারেন ।)মনে হয় .htm লিখতে চেয়েছিলেন।}

১. any text editor (Notepad) and any browser (google crome)
২. !DOCTYPE HTML PUBLIC “-//W3C//
DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/
loose.dtd”
৩. !DOCTYPE HTML
৪. .html
৫. .htm

Level 0

যথারীতি ক্লাসে উপস্থিতি জানান দিলাম 🙂

Level 0

১ । এইচটিএমএল শিখতে কম্পিউটার এ কি কি থাকতে হবে?
>> যে কোন একটি ওয়েব ব্রাউজার ও নোটপ্যাড++

২ । এইচটিএমএল ৪.০১ এ কি ধরনের ডকটাইপ ব্যবহার করা হয়?
>>

৩। এইচটিএমএল ৫ এ কোন ধরনের ডকটাইপ ব্যবহার করা হয়?
>>

৪ । এইচটিএমএল ফাইলের এক্সটেনশন কি?
>> .html

৫ । .html এর পরিবর্তে কি লেখা যায়?
>> বুঝতে পারছিনা কি লিখবোI

কোড বিশ্লেষণ ১। এর তিন নাম্বার লাইন বুঝিনি…. আরেকটু বিশ্লেষন করলে ভালো হয়I
৫। এর শেষ লাইটাও পরিস্কার বুঝিনি

Level 0

৩। এইচটিএমএল ৫ এ কোন ধরনের ডকটাইপ ব্যবহার করা হয়?
>>

Level 0

ওয়েব ডিজাইন টিউটোরিয়াল [পর্ব-০1] দরকার। দয়া করে লীংকটা দিন।

অতি দুঃখের সাথে বলতে হচ্ছে দেশের বাইরে থাকাতে সঠিক সময় উপস্থিত হতে পারি না।তাই আমাদের জন্যে সকল পর্বগুলির লিংকটা ‍যুক্ত করে দিবেন।

১ । এইচটিএমএল শিখতে কম্পিউটার এ কি কি থাকতে হবে? – একটি ব্রাউজার এবং নোটপ্যাড ++

২ । এইচটিএমএল ৪.০১ এ কি ধরনের ডকটাইপ ব্যবহার করা হয়? –

৩। এইচটিএমএল ৫ এ কোন ধরনের ডকটাইপ ব্যবহার করা হয়?-

৪ । এইচটিএমএল ফাইলের এক্সটেনশন কি?- .html

৫ । .html এর পরিবর্তে কি লেখা যায়?- .htm

2. !DOCTYPE HTML PUBLIC “-//W3C//
DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/
loose.dtd”
3. !DOCTYPE HTML