আসসালামু আলাইকুম । আমাদের আজকের আলোচনার বিষয় এইচটিএমএল সম্পর্কে প্রাথমিক আলোচনা এবং এইচটিএমএল সিনট্যাক্স । আজকের আলোচনার বিষয়টি খুবই গুরুত্বপূর্ণ ।
এইচটিএমএল এর পূর্ণরূপ হচ্ছে 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 এর পরিবর্তে কি লেখা যায়?
প্রশ্নের উত্তর পেতে আজকের আলোচনার বিষয়টি মনোযোগ সহকারে পড়ুন ।
ওয়েব ডিজাইন ডিজাইন টিউটোরিয়াল এর দ্বিতীয় পর্ব এখানেই শেষ করছি । যদি আজকের টপিকের কোন বিষয় বুঝতে অসুবিধা হয় তাহলে নির্দ্বিধায় আমাকে কমেন্ট এর মাধ্যমে প্রশ্ন করুন ।
আগামী চেইন টিউন পাবেনঃ ১৫ এপ্রিল, ২০১৫ (বুধবার)
আগামী চেইন টিউন এ থাকছেঃ এইচটিএমএল ট্যাগ, লাইন ব্রেক-আপ, হেডিং ।
আমার সাথে ফেইসবুক এ যোগাযোগ করতে এখানে ক্লিক করুন ।
ধন্যবাদ সবাইকে আজকের বিষয়টি মনোযোগ সহকারে পড়ার জন্য । ভাল থাকবেন সবাই । আল্লাহ্ হাফেজ ।
আমি জিহাদুর রহমান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 51 টি টিউন ও 194 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 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
১ । এইচটিএমএল শিখতে কম্পিউটার এ কি কি থাকতে হবে?
>> যে কোন একটি ওয়েব ব্রাউজার ও নোটপ্যাড++
২ । এইচটিএমএল ৪.০১ এ কি ধরনের ডকটাইপ ব্যবহার করা হয়?
>>
৩। এইচটিএমএল ৫ এ কোন ধরনের ডকটাইপ ব্যবহার করা হয়?
>>
৪ । এইচটিএমএল ফাইলের এক্সটেনশন কি?
>> .html
৫ । .html এর পরিবর্তে কি লেখা যায়?
>> বুঝতে পারছিনা কি লিখবোI
কোড বিশ্লেষণ ১। এর তিন নাম্বার লাইন বুঝিনি…. আরেকটু বিশ্লেষন করলে ভালো হয়I
৫। এর শেষ লাইটাও পরিস্কার বুঝিনি
@zahid20: ভাইয়া, ওয়েব ডিজাইন টিউটোরিয়াল এর প্রথম পর্ব এখানে; https://www.techtunes.io/web-design/tune-id/344189
অতি দুঃখের সাথে বলতে হচ্ছে দেশের বাইরে থাকাতে সঠিক সময় উপস্থিত হতে পারি না।তাই আমাদের জন্যে সকল পর্বগুলির লিংকটা যুক্ত করে দিবেন।
@ছালাউদ্দিন মজুমদার (মাসুদ): ভাইয়া, ওয়েব ডিজাইন টিউটোরিয়াল এর প্রথম পর্ব এখানে; https://www.techtunes.io/web-design/tune-id/344189
এবং দ্বিতীয় পর্ব এখানে; https://www.techtunes.io/web-design/tune-id/344416
১ । এইচটিএমএল শিখতে কম্পিউটার এ কি কি থাকতে হবে? – একটি ব্রাউজার এবং নোটপ্যাড ++
২ । এইচটিএমএল ৪.০১ এ কি ধরনের ডকটাইপ ব্যবহার করা হয়? –
৩। এইচটিএমএল ৫ এ কোন ধরনের ডকটাইপ ব্যবহার করা হয়?-
৪ । এইচটিএমএল ফাইলের এক্সটেনশন কি?- .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
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
![জাভাস্ক্রিপ্ট টিউটোরিয়াল [পর্ব-০৭] :: জাভাস্ক্রিপ্ট ফাংশন](https://dnc.techtunes.io/tDrive/tuner/cybershot/343605/js.jpg "জাভাস্ক্রিপ্ট টিউটোরিয়াল [পর্ব-০৭] :: জাভাস্ক্রিপ্ট ফাংশন")
![ওয়েব ডিজাইন টিউটোরিয়াল [পর্ব-০৬] :: এইচটিএমএল ফর্ম এবং এনটাইটি](https://dnc.techtunes.io/tDrive/tuner/cybershot/347449/design.png "ওয়েব ডিজাইন টিউটোরিয়াল [পর্ব-০৬] :: এইচটিএমএল ফর্ম এবং এনটাইটি")
![ওয়েব ডিজাইন টিউটোরিয়াল [পর্ব-০৯] :: সিএসএস কি, কেন? সিএসএস শেখার পূর্বপ্রস্তুতি](https://dnc.techtunes.io/tDrive/tuner/cybershot/348856/design.png "ওয়েব ডিজাইন টিউটোরিয়াল [পর্ব-০৯] :: সিএসএস কি, কেন? সিএসএস শেখার পূর্বপ্রস্তুতি")
১। একটি Browser এবং একটি Text Editor
২।
৩।
৪। .html
৫। .html