চতুর্থ অধ্যায় লেকচার-০৪: HTML এর মৌলিক বিষয়সমূহ।

HTML এর ধারনা

HTML হলো ওয়েবপেজ তৈরির জন্য বহুল ব্যবহৃত একটি মার্কআপ ল্যাঙ্গুয়েজ। যার পূর্ণরুপ-Hyper Text Markup Language । ওয়েব ডেভেলপার হতে হলে সবার প্রথমে এ ভাষাটি শিখতে হয়। ১৯৯০ সালে টিম বার্নার্স লী এ ভাষার প্রাথমিক রুপদান করেন, এজন্য টিম বার্নার্স লী কে এ ভাষার জনক বলা হয়। এটি মূলত টেক্সটভিত্তিক প্রোগ্রামভাষা। ১৯৯৭ সালের জানুয়ারিতে W3C কর্তৃক প্রথম ডেভেলপকৃত HTML3.2 প্রকাশিত হয় এবং একই বছরে নতুন সংস্করন হিসেবে HTML4.2 প্রকাশ করে। বর্তমানে HTML এর সর্বশেষ ভার্সন হলো-HTML5 যা ২০১০ সালে পরিচিতি লাভ করে। বিভিন্ন টেক্সট এডিটর ব্যবহার করে ওয়েবপেজের জন্য HTML ফাইল তৈরি করা যায়। HTML ফাইল এর এক্সটেনশন হলো .html বা .htm ।

HTML এর সুবিধাসমূহ

• HTML সহজে ব্যবহার করা যায় এবং HTML দ্বারা তৈরিকৃত পেজ সহজে লোড হয়।
• প্রায় সকল ধরনের ব্রাউজার সমর্থন করে।
• HTML শেখা ও ফরমেটিং করা সহজ, কারন HTML ভাষায় প্লেইন টেক্সট ব্যবহৃত হয়।
• এটি কেস সেনসেটিভ নয়।
• HTML দ্বারা তৈরিকৃত পেজ লোড হতে সময় কম লাগে।
• HTML সবার জন্য বিনামূল্যে উন্মুক্ত।
• এটি ইউজার ফ্রেন্ডলি হওয়ায় সহজে যে কেউ শিখতে পারে।
• HTML এ তৈরি করা সাইট রক্ষণাবেক্ষন ও আপডেট করা সহজ।
• পেজের সাইজ কম হওয়ায় খরচ কম হয়।
• এসইও ফ্রেন্ডলি সাইট তৈরি করা যায়।
• যে কোন টেক্সট এডিটরে কোড লেখা যায়।

HTML এর অসুবিধাসমূহ

•  সাধারণ একটি ছোট ওয়েবপেজ তৈরির জন্যও প্রচুর কোড লিখতে হয়।
• বেশি কোড যুক্ত ওয়েবপেজ চালানোর ক্ষেত্রে জটিলতার সৃষ্টি করে।
• HTML এর নিরাপত্তা ব্যবস্থা খুবই দূর্বল।
• HTML স্ট্যাটিক পেজ তৈরি করতে পারলেও ডাইনামিক পেজ তৈরি করতে পারে না।

 

HTML ট্যাগ :

উভয় পাশে অ্যাঙ্গেল ব্রাকেট (< >) এর মধ্যে লেখা নির্দিষ্ট কী-ওয়ার্ডকে (অক্ষর বা শব্দ) একত্রে ট্যাগ বলে।
যেমন- < p > , < body >
এইচটিএমএল ট্যাগসমূহ সাধারণত জোড়ায় জোড়ায় থাকে। যেমন- < p >…………………< /p >
প্রথম ট্যাগটি হলো ওপেনিং ট্যাগ(Opening Tag) এবং শেষের ট্যাগটি হলো ক্লোজিং ট্যাগ(Closing Tag)। ওপেনিং ট্যাগ ও ক্লোজিং ট্যাগ দেখতে একই, শুধু পার্থক্য হলো, ক্লোজিং ট্যাগে একটা স্লাশ(/) চিহ্ন থাকে।

ট্যাগ এর গঠন :

• ক্ষুদ্রতম চিহ্ন(<)
• একটি অক্ষর বা শব্দ
• বৃহত্তম চিহ্ন
• শেষ ট্যাগে ফ্রন্ট স্ল্যাশ (/) চিহ্ন

 

ট্যাগ এর প্রকারভেদ :

HTML ট্যাগ ২ প্রকার। যথা-
১. কন্টেইনার ট্যাগ(Container)বা ধারক ট্যাগ: যে ট্যাগের ওপেনিং ট্যাগ আছে এবং ক্লোজিং ট্যাগ আছে তাকে কন্টেইনার ট্যাগ বলে। কন্টেইনার ট্যাগে কন্টেন্ট থাকে। যেমন- < p > I Love my Country < /p >
২. এম্পটি ট্যাগ (Empty) বা ফাঁকা ট্যাগ: যে ট্যাগের ওপেনিং ট্যাগ আছে কিন্তু ক্লোজিং ট্যাগ নেই তাকে এম্পটি ট্যাগ বলে। এম্পটি ট্যাগে কন্টেন্ট থাকে না । যেমন- < br > , < img >

 

HTML এলিমেন্ট :

HTML ওপেনিং ট্যাগ ও ক্লোজিং ট্যাগ এবং উভয় ট্যাগের মাঝের অংশসহ সবকিছু হচ্ছে এইচটিএমএল এলিমেন্ট।
যেমন-< u > I Love my Country < /u >

HTML এলিমেন্ট সিনট্যাক্স/নিয়মনীতি :

• HTML এলিমেন্ট শুরু হয় ওপেনিং ট্যাগ দিয়ে এবং শেষ হয় ক্লোজিং ট্যাগ দিয়ে।
• ওপেনিং ট্যাগ ও ক্লোজিং ট্যাগ এর মধ্যবর্তী সবকিছুই হলো এলিমেন্ট কন্টেন্ট।
• কিছু কিছু HTML এলিমেন্ট এর কন্টেন্ট থাকে না, এগুলোকে এম্পটি কন্টেন্ট বলে।
• এম্পটি বা খালি এলিমেন্টগুলো ওপেনিং ট্যাগের মধ্যেই শেষ হয়ে যায়।
• অধিকাংশ HTML এলিমেন্ট এর অ্যাট্রিবিউট থাকতে পারে।

HTML এলিমেন্ট ২ ধরনের। যথা-
১. নেস্টেড HTML এলিমেন্ট : যখন HTML এলিমেন্ট এর মাঝে অন্যান্য HTML এলিমেন্ট থাকে তখন তাকে নেস্টেড HTML এলিমেন্ট বলে। অধিকাংশ HTML এলিমেন্টগুলো নেস্টেড হতে পারে। যেমন-
< body >
< p > I  love Bangladesh < /p >
< body >

২. এম্পটি HTML এলিমেন্ট : যে সকল HTML এলিমেন্ট-এ কন্টেন্ট নেই তাদেরকে এম্পটি HTML এলিমেন্ট বলে। যেমন-< br >

 

HTML ডকুমেন্ট এর মৌলিক কাঠামো :

HTML ডকুমেন্ট কতগুলো ট্যাগ এর সমন্বয়ে গঠিত, যা ওয়েবপেজ প্রদর্শনকে নির্দিষ্ট করে। নিচে এদের বর্ণনা দেওয়া হলো-

• HTML ট্যাগ: প্রত্যেক এইচটিএমএল ডকুমেন্ট এর শুরুতে ওপেনিং html ট্যাগ দিতে হয় যা দ্বারা html প্রোগ্রাম শুরু বোঝায় এবং শেষে ক্লোজিং html ট্যাগ দিতে হয় যা দ্বারা html প্রোগ্রাম শেষ বোঝায়। html ট্যাগ এর ভিতরে ২ টি অংশ। একটি head এবং অপরটি body ।
• head ট্যাগ: ওয়েবসাইট এর title, link, meta ইত্যাদি ট্যাগ head এর ভিতরে থাকে। head ট্যাগ ওয়েবপেজ সম্পর্কিত তথ্য ধারন করে। কোন পেজ ব্রাউজারে প্রদর্শিত হওয়ার আগে head থেকে প্রয়োজনীয় অংশ পড়ে নেয়।
• title ট্যাগ: টাইটেল ট্যাগ দ্বারা ওয়েবপেজের শিরোনাম বোঝায়। টাইটেল ট্যাগ এর ভিতরে যা লেখা হয় তা ব্রাউজারের উইন্ডোর উপরে টাইটেল হিসেবে প্রদর্শিত হয় ।
• body ট্যাগ: একটি ওয়েবসাইট এর সমস্ত লেখা, অডিও, ভিডিও ইত্যাদি কন্টেন্ট body ট্যাগ এর ভিতরে থাকে। ব্রাউজার এ অংশে থাকা সকল তথ্যাদি ব্যবহারকারীকে প্রদর্শন করে।

< ! DOCTYPE >

< html >

< head >
< title > Title of the Page < /title >
< /head >
< body >
         Content of the Page.
< /body >

< /html >

 

 

ওয়েবপেইজ তৈরি করার জন্য প্রয়োজনীয় টুলস সমুহ :
ওয়েবপেইজ তৈরির ক্ষেত্রে HTML কোড লেখার জন্য একটি এডিটর(Editor) এবং কোডের আউটপুট দেখার জন্য একটি ব্রাউজার প্রয়োজন হয়।

• এডিটর হিসেবে ব্যবহৃত হতে পারে- Notepad, Notepad++, Adobe Dreamweaver ইত্যাদি।
• ব্রাউজার হিসেবে ব্যবহৃত হতে পারে- Internet Explorer, Google Chrome, Mozilla Firefox, Opera ইত্যাদি।

 

HTML ডকুমেন্ট তৈরি :

কিভাবে Notepad ব্যবহার করে একটি HTML ডকুমেন্ট তৈরি করতে হয় এবং সেটি ব্রাউজারে কিভাবে প্রদর্শিত হয়। কয়েকটি ধাপ ব্যবহার করে নিচে তা আলোচনা করা হলো-

ধাপ-০১: Notepad ওপেন করি
উইন্ডোজ-৭ বা পূর্ববর্তী যে কোন ভার্সনে Notepad ওপেন করার নিয়ম:

• ডেস্কটপ থেকে Start বাটনে ক্লিক করি।
• তারপরে All Programs > Accessories > Notepad এ ক্লিক করে Notepad টি ওপেন করি।

উইন্ডোজ-৮ বা পরবর্তী যে কোন ভার্সনে Notepad ওপেন করার নিয়ম:

• উইন্ডোজের সার্চ বক্সে গিয়ে Notepad লিখে সার্চ করে Notepad টি ওপেন করি।

ধাপ-০২: Notepad প্রোগ্রামে প্রয়োজনীয় HTML কোড লিখি
যেমন-

< html >

< head >
< title > Our First Program < /title >
< /head >
< body >
< p > My name is xyz .< /p >
< /body >

< /html >

 

ধাপ-০৩: HTML পেজ সংরক্ষণ/সেভ করি

• File menu তে ক্লিক করে Save/Save As এর উপর ক্লিক করি। তাহলে Save As ডায়ালগ বক্স আসবে।
• File Name এর Text বক্সে কোন একটি নাম টাইপ করি এবং নামের শেষে  .html বা  .htm লিখি (যেমন-habib.html) ।
• Save as type এর  drop down list হতে All files সিলেক্ট করি।
• অবশেষে Save এর উপর ক্লিক করি। তাহলেই পেজ/ডকুমেন্টটি সেভ হয়ে যাবে।

ধাপ-০৪: ব্রাউজারে পেজ ওপেন করি

• ডিজাইন করা ডকুমেন্ট বা পেজটি দেখতে হলে সেভ করা ফাইলে যেয়ে রাইট বাটনে ক্লিক করে Open with থেকে যে কোন একটি ব্রাউজারের মাধ্যমে ওপেন করলেই ডিজাইন করা পেজটির আউটপুট দেখা যাবে।
• অথবা, সেভ করা ফাইলের (habib.html) উপর ডাবল ক্লিক করি তাহলে ডিজাইন করা পেজটির আউটপুট দেখা যাবে।

 

[ বি.দ্র.: ব্রাউজারে শুধুমাত্র ওপেনিং ও ক্লোজিং এর মাঝের অংশটুকুই দেখা যাবে। মনে রাখতে হবে এর মাঝেও যদি কোন ফরমেটিং ট্যাগ ব্যবহার করা হয় সেটিও দেখা যাবে না। শুধুমাত্র কাঙ্খিত লেখা দেখা যাবে, কোন কোড দেখা যাবে না। ]

 

 

চতুর্থ অধ্যায় লেকচার-০৩: ওয়েবসাইটের কাঠামো (ট্রি, নেটওয়ার্ক, লিনিয়ার, হাইব্রিড)।

---

Written by:

Habibur Rahman(Habib Sir)
Author at www.habibictcare.com
Email:habibbzm2018@gmail.com
Cell: +8801712-128532,+8801913865284