HTML Details Bangla Tutorial (এইচ.টি.এম.এল সংক্রান্ত বিস্তারিত )
HTML Details Bangla Tutorial (এইচ.টি.এম.এল সংক্রান্ত বিস্তারিত )
এইচ টি এম এল (HTML) HTML(এইচটিএমএল) হচ্ছে Hyper Text Markup Language শব্দটির সংক্ষিপ্ত রূপ।এটি কোন প্রকার প্রোগ্রামিং ল্যাঙ্গুয়েজ নয় বরং এটি অনেকগুলো Markup Tag এর সমষ্টি যা ওয়েব পেজ প্রস্তুত করতে ব্যবহার করা হয়। Markup Tag এর মাধ্যমে একটি ওয়েব পেজের বিভিন্ন অংশকে বিভিন্ন ভাবে চিহ্নিত করা হয়। মূলতঃ সকল ধরনের ওয়েব সাইট সহজে তৈরি করার এবং সকল সার্ভার সাপোর্ট করা Markup Tag ল্যাঙ্গুয়েজ হচ্ছে HTML (এইচটিএমএল)।
Masud Computer BD ওয়েব সাইট কর্তৃপক্ষের দৃষ্টিতে HTML (এইচটিএমএল) দিয়ে ওয়েব পেজ তৈরি করা, ডিজাইন করা, Content ও Outlook দেওয়াসহ এ জাতীয় সকল কাজ করা যায়। এইচটিএমএল সফটওয়্যারটির মূল লক্ষ্য থাকে একটি ওয়েব পেজ (HTML Document) তৈরি করা যা সকল Browser (যেমন-Opera, Mozilla Firefox, Choreme ইত্যাদি)-এ কাজ করে। এইচটিএমএল (HTML) কে ধরা হয় ওয়েব পেজ নির্মাণের সূচনাকারী হিসেবে। একজন দক্ষ ওয়েব ডেভেলপারকে অবশ্যই উক্ত সফটওয়্যারটি ভালভাবে আয়ত্ব করতে হবে।
HTML (এইচটিএমএল) ট্যাগ/কোড লিখার জন্য Dreamweaver এর ন্যায় বেশ কিছু Editor Software ব্যবহার করা যায়। তবে কোন প্রকার এডিটর সফটওয়্যার ব্যবহার না করেই কম্পিউটারে থাকা Notepad/Notepad++ নামে যে Text Editor আছে তাতেই HTML Code লিখা যায়। অতঃপর উক্ত কোডকে Run করানোর জন্য বিশ্বের যে কোন ব্রাউজার হলেই তা প্রদর্শিত হবে।
HTML (এইচটিএমএল) ব্যবহার করে একটি ওয়েব পেজের Layout ও Content তৈরি করা যাবে এবং একটি নিম্নমানের ওয়েব পেজ তৈরি করতে পারবেন। একটি সুন্দর ও Dynamic ওয়েব সাইট তৈরির জন্য আপনাকে অবশ্যই এইচটিএমএল এর পাশাপাশি সিএসএস, পিএসপি ও জাভা স্ক্রিপ্ট এর ন্যায় কিছু স্টাইলিষ্ট সফটওয়্যার এর ব্যবহার জানতে হবে। তা না হলে ওয়েব পেজটি গতানুগতিক মনে হবে। উল্লেখ্য, স্টাইলষ্ট সফটওয়্যারগুলো শিখা খুব বেশি কঠিন কিংবা বেশি সময় সাপেক্ষ নয়। টেকনিক জানতে পারলে অনায়াসেই তা আয়ত্ব করতে সক্ষম হবেন।
HTML (এইচটিএমএল) এ কাজ করার জন্য অবশ্যই html ট্যাগ ব্যবহার করা লাগবে। তাছাড়া অন্য দুটি গুরুত্বপূর্ণ ট্যাগ হচ্ছে head & body ট্যাগ। হেড ও বডি ট্যাগ ছাড়া যে সকল কনটেন্ট এইচটিএমএল সফটওয়্যারে ব্যবহার করা যায় তা হচ্ছে- Text, Image, Table, Form, Audio, Video ইত্যাদি। উল্লেখ করা যেতে পারে সকল কনটেন্ট বডি ট্যাগের মধ্যে লিখতে হবে।
HTML (এইচটিএমএল) শুরু করার জন্য যে সব বিষয় ভালোভাবে জানা থাকা দরকার তা হচ্ছে-
১। ট্যাগ (Tag)
২। এলিমেন্ট (Element)
৩। এট্টিবিউট (Atribute)
৪। HTML Document.
১। ট্যাগ (Tag)
২। এলিমেন্ট (Element)
৩। এট্টিবিউট (Atribute)
৪। HTML Document.
১। ট্যাগ (Tag): এইচটিএমএল এর প্রাণ হচ্ছে ট্যাগ, যার মাধ্যমে সকল কোড লেখা হয়। অন্যভাবে বলা যায় মার্কআপ ল্যাঙ্গুয়েজে ব্যবহৃত এক ধরনের সংকেত হচ্ছে ট্যাগ। মূলতঃ HTML Markup Tag-কেই এইচটিএমএল ট্যাগ বলা হয়। প্রতিটি ট্যাগ শুরু করা লাগে বাম এঙ্গেল দিয়ে (<) এরপর Keyword লিখতে হয় এবং শেষ করতে হয় ডান এঙ্গেল দিয়ে (>)। উদাহরণ স্বরূপ দেখানো যায়- <html>, <head>, <body> এদের প্রত্যেকটি এক একটি ট্যাগ (তবে তা শুধু মাত্র কাজ শুরু করার ট্যাগ)। ট্যাগ লেখার ক্ষেত্রে একটি গুরুত্বপূর্ণ নিয়ম হচ্ছে যে ট্যাগ দিয়ে শুরু করা হয় সেই ট্যাগ দিয়েই কোডিং শেষ করতে হয়। কেবলমাত্র পার্থক্য হচ্ছে Keyword এর পূর্বে একটি (/)স্লাশ চিহ্ন দিতে হয়। যেমন </html.>, </head>, </body> ইত্যাদি। [শিক্ষার্থী বন্ধুদের দৃষ্টি আকর্ষণ করছি- এঙ্গেল (< >) চিহ্নের ভিতরে কিছু . (ডট) চিহ্ন ব্যবহার করেছি কোর্ডটির কার্যকারিতা বন্ধ করার জন্য তথা ওয়েব সাইটে কোডটি প্রদর্শনের জন্য। আপনারা কাজ করার সময় উক্ত ডট চিহ্নটি ব্যবহার করবেন না]।
HTML সফটওয়্যার যদিও Case Sensitive নয় তথাপি Small Letter-দিয়ে কোডিং লেখাই উত্তম। স্বরণ রাখার বিষয় হচ্ছে- যে ট্যাগটি সবার প্রথমে শুরু হবে সেই ট্যাগটি সবার শেষে ইতি টানতে হবে। বিষয়টি পরিষ্কার করার জন্য নিম্নের উদাহরণটি লক্ষ্য করুনঃ
উক্ত কোডটি Notepad/Notepad++ এ লেখার পর তা যে কোন নামে এক্সটেনশন এইচটিএমএল সহ সেভ করুন। তারপর রান করালে নিম্নের ছবির ন্যায় প্রদর্শিত হবেঃ
২। এলিমেন্ট (Element): এইচটিএমএল এলিমেন্ট হচ্ছে HTML Document বর্ণনা করার স্থান। প্রতিটি HTML Document এর চারটি মৌলিক এলিমেন্ট থাকে। যেমনঃ html, head, title & body ইত্যাদি।এলিমেন্ট ট্যাগ শুরু হয় Opening tag (<html>) ব্যবহারের মাধ্যমে এবং শেষ হয় Closing tag (</html>) ব্যবহার করে এবং এর মাঝে Element Content থাকে। যথাঃ
২। এলিমেন্ট (Element): এইচটিএমএল এলিমেন্ট হচ্ছে HTML Document বর্ণনা করার স্থান। প্রতিটি HTML Document এর চারটি মৌলিক এলিমেন্ট থাকে। যেমনঃ html, head, title & body ইত্যাদি।এলিমেন্ট ট্যাগ শুরু হয় Opening tag (<html>) ব্যবহারের মাধ্যমে এবং শেষ হয় Closing tag (</html>) ব্যবহার করে এবং এর মাঝে Element Content থাকে। যথাঃ
<p>Bangladesh is a beautiful country. Its stand on the river of Burigonga.</p>
৩। এট্টিবিউট (Attribute): প্রতিটি ওয়েব পেজে বিভিন্ন Text, Image, Table থাকতে পারে আর এগুলোর অবস্থান, ডিজাইন বিভিন্ন ধরনের হতে পারে।কতগুলো নির্দিষ্ট শব্দ (word) ব্যবহার করে কোন Element কে সাজানো হলে ঐ শব্দ (word) গুলোকে ঐ এলিমেন্ট এর এট্টিবিউট বলা হয়ে থাকে। সংক্ষেপে বলা যায় কোন এলিমেন্ট এর বৈশিষ্ট নির্ধারণকারী শব্দগুলোই হল উক্ত এলিমেন্ট-এর এট্টিবিউট। প্রতিটি এট্টিবিউট এর এক বা একাধিক value থাকতে পারে। এক কথায় বলা যায় “ট্যাগের নির্দেশকে সঠিকভাবে কাজ করানোর জন্য এট্টিবিউট ব্যবহার করা হয়”। যেমনঃ
<.p align=”justify”.> Bangladesh is a beautiful country. Its stand on the river of Burigonga. Bangladesh is a beautiful country. Its stand on the river of Burigonga. Bangladesh is a beautiful country. Its stand on the river of Burigonga.Bangladesh is a beautiful country. Its stand on the river of Burigonga. Bangladesh is a beautiful country. Its stand on the river of Burigonga. Bangladesh is a beautiful country. Its stand on the river of Burigonga.<./p.>
উপরে align attribute ব্যবহার করে value “justify” দেয়া হয়েছে যার ফলে প্যারাগ্রাফটি দুইদিক থেকে সমান (justify) দেখাবে। কিন্তু এট্টিবিউট value “center” দেয়া হলে লেখাগুলো দুই দিকে সমান না হয়ে পৃষ্ঠার মাঝখানে নিম্নরূপ দেখাবে।
Bangladesh is a beautiful country. Its stand on the river of Burigonga. Bangladesh is a beautiful country. Its stand on the river of Burigonga. Bangladesh is a beautiful country. Its stand on the river of Burigonga.Bangladesh is a beautiful country. Its stand on the river of Burigonga. Bangladesh is a beautiful country. Its stand on the river of Burigonga. Bangladesh is a beautiful country. Its stand on the river of Burigonga.
৪। HTML Document: HTML Element দ্বারা মূলতঃ একটি ওয়েব সাইট (HTML Document) গঠিত। সহজ ভাবে বলা যায়, HTML Code দিয়ে তৈরি ফাইল হলো HTML Document। যে কোন ওয়েব সাইটের প্রধান দু’টি অংশ হচ্ছে Head ও Body Section. HTML File সেভ করার সময় অবশ্যই ফাইলের নামের পরে html/htm এক্সটেনশান দিয়ে Save করতে হবে।
ব্যবহারিক HTML:
একটি ওয়েব পেজ তৈরি করার জন্য প্রথমে Notepad/Notepad++ চালু (ওপেন) করি। তারপর প্রথমে ফাইলটিকে Practice.html নাম দিয়ে সেভ করি(অবশ্য কোড লেখার পর সেভ করলেও অসুবিধা নেই, তবে ফাইল রান করার পূর্বে অবশ্যই সেভ করতে হবে)। ফাইল সেভ করার নিয়ম জানা না থাকলে মাইক্রোসফট ওয়ার্ড অংশ থেকে দেখে আসতে পারেন। অতঃপর নিচের মতো করে কোড লিখা শুরু করুন। ইচ্ছেকরলে কোড মনেরমতো করে সাজিয়ে লিখতে পারেন কিংবা নিচে নিচে লিখলেও সমস্যা নেই।
একটি ওয়েব পেজ তৈরি করার জন্য প্রথমে Notepad/Notepad++ চালু (ওপেন) করি। তারপর প্রথমে ফাইলটিকে Practice.html নাম দিয়ে সেভ করি(অবশ্য কোড লেখার পর সেভ করলেও অসুবিধা নেই, তবে ফাইল রান করার পূর্বে অবশ্যই সেভ করতে হবে)। ফাইল সেভ করার নিয়ম জানা না থাকলে মাইক্রোসফট ওয়ার্ড অংশ থেকে দেখে আসতে পারেন। অতঃপর নিচের মতো করে কোড লিখা শুরু করুন। ইচ্ছেকরলে কোড মনেরমতো করে সাজিয়ে লিখতে পারেন কিংবা নিচে নিচে লিখলেও সমস্যা নেই।
উক্ত কোড লেখার পর ফাইলটিকে (Practice.html) সেভ করে (প্রথমে সেভ করা থাকলে কোড লেখার পর Ctrl+S দিলে সেভ হয়ে যাবে) যে কোন ব্রাউজার দিয়ে Run করলে নিচের ছবির মতো দেখা যাবেঃ
কোড বিশ্লেষণঃ
আমরা উপরে <html> ও </html> ট্যাগদ্বয়ের মাঝে <head> ও <body> ট্যাগের ব্যবহার সংক্ষিপ্তাকারে দেখিয়েছি। লক্ষ্য করলে বুঝতে পারবেন- উক্ত <head> ও </head> ট্যাগের মাঝে <title> ও </title> ট্যাগের মাঝে Digital Bangladesh লেখা হয়েছে বিধায় ওয়েব সাইটের শিরোনাম Digital Bangladesh লেখা দেখা যাচ্ছে। অতঃপর বডি সেকশানে <body> ও </body> ট্যাগের মাঝে h1, h2, h3, h4, h5 & h6 এই ছয়টি ট্যাগে বিভিন্ন সাইজের লেখা দেখানো হয়েছে, মূলতঃ উল্লেখিত ট্যাগ দিয়ে আর্টিকেলের শিরোনাম দেখানো হয়।
আমরা উপরে <html> ও </html> ট্যাগদ্বয়ের মাঝে <head> ও <body> ট্যাগের ব্যবহার সংক্ষিপ্তাকারে দেখিয়েছি। লক্ষ্য করলে বুঝতে পারবেন- উক্ত <head> ও </head> ট্যাগের মাঝে <title> ও </title> ট্যাগের মাঝে Digital Bangladesh লেখা হয়েছে বিধায় ওয়েব সাইটের শিরোনাম Digital Bangladesh লেখা দেখা যাচ্ছে। অতঃপর বডি সেকশানে <body> ও </body> ট্যাগের মাঝে h1, h2, h3, h4, h5 & h6 এই ছয়টি ট্যাগে বিভিন্ন সাইজের লেখা দেখানো হয়েছে, মূলতঃ উল্লেখিত ট্যাগ দিয়ে আর্টিকেলের শিরোনাম দেখানো হয়।
নিম্নে Head ও Body Section নিয়ে পর্যায়ক্রমে আলোচনা করা হলো।
Head Section:
ইতিমধ্যে আমরা আপনাদেরকে দেখিয়েছি হেড সেকশানের সকল কিছু <head> ও </head> ট্যাগের মাঝে রাখতে হবে। উক্ত সেকশানে ডকুমেন্ট সম্পর্কিত তথ্য থাকে এবং তা ওয়েব পেজের শিরোনাম হিসেবে প্রদর্শিত হয় কিক্ত ওয়েব পেজে (ভিতরে) তা দেখা যায় না। হেড সেকশানে যে সকল ট্যাগ দেখা যায় সেগুলোর নামসহ প্রধান দু’টির সংক্ষিপ্ত বিবরণ নিম্নরূপঃ
ক) Title Tag
খ) Meta Tag
গ) Link Tag
ঘ) Base Tag
ঙ) Style Tag
চ) Script Tag
ছ) Index Tag
ইতিমধ্যে আমরা আপনাদেরকে দেখিয়েছি হেড সেকশানের সকল কিছু <head> ও </head> ট্যাগের মাঝে রাখতে হবে। উক্ত সেকশানে ডকুমেন্ট সম্পর্কিত তথ্য থাকে এবং তা ওয়েব পেজের শিরোনাম হিসেবে প্রদর্শিত হয় কিক্ত ওয়েব পেজে (ভিতরে) তা দেখা যায় না। হেড সেকশানে যে সকল ট্যাগ দেখা যায় সেগুলোর নামসহ প্রধান দু’টির সংক্ষিপ্ত বিবরণ নিম্নরূপঃ
ক) Title Tag
খ) Meta Tag
গ) Link Tag
ঘ) Base Tag
ঙ) Style Tag
চ) Script Tag
ছ) Index Tag
ক) Title Tag: টাইটেল ট্যাগ বিষয়ে ইতিপূর্বে কিছুটা আলোচনা করেছি। উক্ত ট্যাগে সাধারণত ওয়েব সাইটের বিষয়বস্তু তুলে ধরা হয় এবং তা ওয়েব সাইটের টাইটেলে প্রদর্শিত হয়। সার্চ ইঞ্জিন যাতে ওয়েব পেজকে সহজে ইনডেক্সিং করতে সক্ষম হয় সেজন্য যথাযথ টাইটেল ব্যবহার করার গুরুত্ব অপরিসীম। একটি Valid HTML ডকুমেন্ট তৈরি করতে অবশ্যই টাইটেল ট্যাগ ব্যবহার করতে হবে।
খ) Meta Tag: Meta Tag সাধারণত টাইটেল ট্যাগের পরে ব্যবহার করা হয়। ওয়েব পেজ (ডকুমেন্টটি) কোন বিষয়ে তার একটি বর্ণনা দেয়ার জন্য উক্ত ট্যাগের গুরুত্ব অপরিসীম। কেননা এই বর্ণনার আলোকে সার্চ ইঞ্জিন আপনার পেজটিকে ইনডেক্সিং করবে এবং ইন্টারনেট ব্যবহারকারীগণ আপনার পেজটি সম্পর্কে ধারনা লাভ করতে সক্ষম হবে। এই ট্যাগের কোন শেষ ট্যাগ নেই। Meta Tag- এর সাধারণ নিয়ম নিম্নরূপঃ
<meta name=”developer” content=” MASUD RANA”>
Body Section:
আমরা জানি, head শব্দের অর্থ ‘মাথা’ আর body শব্দের অর্থ ‘দেহ’। ইতিমধ্যে আমরা Head Section নিয়ে অতি প্রয়োজনীয় আলোচনা করেছি। এই পর্যায়ে Body Section নিয়ে আলোচনা করা হবে। তার পূর্বে স্মরণ করে দিতে চাই- এই সেকশানে যতগুলো এট্টিবিউটই ব্যবহার করা হোক না কেন তা অবশ্যই <body> ও </body> ট্যাগের মধ্যেই থাকবে। তবে আপনি নোট প্যাড++ ব্যবহার করলে <html>, <head> ও <body> এর কোন ট্যাগ উল্লেখ না করে শুধুমাত্র কনটেন্ট ও ধারাবাহিক অবশিষ্ট এট্টিবিউট ব্যবহার করলেই আপনার কাঙ্খিত ফলাফল লাভে সক্ষম হবেন। কিন্তু মনে রাখার স্বার্থে ট্যাগগুলো ব্যবহার করাই যুক্তিযুক্ত। ওয়েব পেজের কনটেন্টগুলো সাধারণতঃ Text, Image, Table, Form, Frame, Paragraph, Heading ইত্যাদি সেকশানে লিখতে হবে। যে কোন ওয়েব পেজের কনটেন্টকে আকর্ষণীয় করে তোলার জন্য এট্টিবিউট ব্যবহার করা হয়ে থাকে। Body Tag এর মধ্যে সাধারণতঃ ছয়টি এট্টিবিউট ব্যবহার করা যায়। যেমনঃ
(i) Bgcolor
(ii) Background
(iii) Text
(iv) Link
(v) Vlink
(vi) Alink.
আমরা জানি, head শব্দের অর্থ ‘মাথা’ আর body শব্দের অর্থ ‘দেহ’। ইতিমধ্যে আমরা Head Section নিয়ে অতি প্রয়োজনীয় আলোচনা করেছি। এই পর্যায়ে Body Section নিয়ে আলোচনা করা হবে। তার পূর্বে স্মরণ করে দিতে চাই- এই সেকশানে যতগুলো এট্টিবিউটই ব্যবহার করা হোক না কেন তা অবশ্যই <body> ও </body> ট্যাগের মধ্যেই থাকবে। তবে আপনি নোট প্যাড++ ব্যবহার করলে <html>, <head> ও <body> এর কোন ট্যাগ উল্লেখ না করে শুধুমাত্র কনটেন্ট ও ধারাবাহিক অবশিষ্ট এট্টিবিউট ব্যবহার করলেই আপনার কাঙ্খিত ফলাফল লাভে সক্ষম হবেন। কিন্তু মনে রাখার স্বার্থে ট্যাগগুলো ব্যবহার করাই যুক্তিযুক্ত। ওয়েব পেজের কনটেন্টগুলো সাধারণতঃ Text, Image, Table, Form, Frame, Paragraph, Heading ইত্যাদি সেকশানে লিখতে হবে। যে কোন ওয়েব পেজের কনটেন্টকে আকর্ষণীয় করে তোলার জন্য এট্টিবিউট ব্যবহার করা হয়ে থাকে। Body Tag এর মধ্যে সাধারণতঃ ছয়টি এট্টিবিউট ব্যবহার করা যায়। যেমনঃ
(i) Bgcolor
(ii) Background
(iii) Text
(iv) Link
(v) Vlink
(vi) Alink.
(i) Bgcolor এর ব্যবহারঃ উক্ত এট্টিবিউট ব্যবহার করে ওয়েব পেজের ব্যাকগ্রাউন্ডে ইচ্ছেমতো কালার ব্যবহার করা যায়। উদাহরণস্বরূপ বলা যায়- ব্যাকগ্রাউন্ডে হলুদ রং সেট করার জন্য আপনি কোড লিখতে পারেন- <body bgcolor=”yellow”>। তাছাড়া আপনি যদি অন্য কোন রং ব্যবহার করতে চান তাহলে কালার-এর নাম কিংবা কোড লিখতে পারেন।
(ii) Background এর ব্যবহারঃ উক্ত এট্টিবিউট ব্যবহার করে আপনার ওয়েব পেজের ব্যাকগ্রাউন্ডে পছন্দের ইমেজ সেট করতে পারবেন [যা ডকুমেন্টটি যেখানে সেভ করেছেন (আপনার কম্পিউটারে ইমেজ ফাইলটি) সেখানে থাকতে হবে]। ইমেজ সেট করার জন্য আপনাকে কোড লিখতে হবে নিম্নরূপ-
<body background=”bangladesh.jpeg”> তাহলে কাঙ্খিত ইমেজটি ওয়েব পেজে প্রদর্শিত হবে।
<body background=”bangladesh.jpeg”> তাহলে কাঙ্খিত ইমেজটি ওয়েব পেজে প্রদর্শিত হবে।
(iii) Text এর ব্যবহারঃ যে কোন ওয়েব পেজের লেখার (Text) রং পরিবর্তনের জন্য এই এট্টিবিউট ব্যবহার করা হয়। মনে করুন আপনি লেখার রং লাল দিতে চান তাহলে কোড লিখুন-
<body text=”red”> তাহলে আপনার পেজটিতে লেখার রং লাল দেখাবে। আপনি ইচ্ছা করলে অন্য রং ব্যবহার করতেই পারেন।
<body text=”red”> তাহলে আপনার পেজটিতে লেখার রং লাল দেখাবে। আপনি ইচ্ছা করলে অন্য রং ব্যবহার করতেই পারেন।
(iv) Link এর ব্যবহারঃ ওয়েব পেজের হাইপারটেক্সট লিঙ্কের রং নির্ধারণ করার জন্য উক্ত এট্টিবিউট ব্যবহার করা হয়। মনে করুন, আপনি লিঙ্কের রং নীল দিতে ইচ্ছুক। তাহলে কোড লিখুন নিম্নরূপঃ
<body link=”blue”>তাহলে আপনার লিঙ্কটিতে লেখার রং নীল দেখাবে।
<body link=”blue”>তাহলে আপনার লিঙ্কটিতে লেখার রং নীল দেখাবে।
(v) Vlink এর ব্যবহারঃ ওয়েব পেজের ইতিমধ্যে ভিজিট করা হাইপারটেক্সট লিঙ্কের রং নির্ধারণের জন্য ভিলিঙ্ক এট্টিবিউট ব্যবহার করা হয়। ভিজিট করা হাইপারটেক্সট এর আকাশী রং দিতে চাইলে কোড লিখুনঃ
<body vlink=”sky”>তাহলে আপনার হাইপারটেক্সট লিঙ্কটিতে লেখার রং আকাশী দেখাবে।
<body vlink=”sky”>তাহলে আপনার হাইপারটেক্সট লিঙ্কটিতে লেখার রং আকাশী দেখাবে।
(vi) Alink এর ব্যবহারঃ ওয়েব পেজের কোন হাইপারটেক্সট লিঙ্কের উপর মাউস পয়েন্টার নিয়ে গেলে লিঙ্কটির কালার পরিবর্তন হয়ে যায় যে এট্টিবিউট ব্যবহারের মাধ্যমে তা হচ্ছে alink। তা করার জন্য কোড লিখতে পারেনঃ
<body alink=”magenta”>তাহলে আপনার হাইপারটেক্সট এর উপর মাউস পয়েন্টার নিলে লিঙ্কটিতে লেখার রং ম্যাজেন্টা দেখাবে।
<body alink=”magenta”>তাহলে আপনার হাইপারটেক্সট এর উপর মাউস পয়েন্টার নিলে লিঙ্কটিতে লেখার রং ম্যাজেন্টা দেখাবে।
Body Section এ বিভিন্ন এট্টিবিউটের পাশাপাশি বিভিন্ন ট্যাগ ব্যবহার করে ওয়েব পেজটিকে সুন্দর করা যায়। নিম্নে বিভিন্ন ট্যাগ বিষয়ে বর্ণনা দেওয়া হলোঃ
০১। Heading Tag: <h2.>…</h2.>
Body Section এ বিভিন্ন প্যারাগ্রাফের শিরোনাম ব্যবহার করতে কিছু হেডিং ট্যাগ প্রদান করা হয় যা <h1>, <h2>. <h3>, <h4>, <h5> কিংবা <h6> এই ছয়টি ট্যাগ দ্বারা লিখা হয়ে থাকে। অর্থাৎ হেডিং১ (<h1>) ব্যবহার করলে বড় আকারের ফন্ট দেখা যায় আর বাকীগুলো ব্যবহারে পর্যায়ক্রমে ছোট আকারের ফন্ট প্রদর্শিত হয়। সাধারণত যে কোন শিরোনাম ওয়েব পেজের বাম দিক ঘেঁষে থাকে। Align এট্টিবিউট ব্যবহার করার মাধ্যমে যে কোন লেখা কিংবা ইমেজের অবস্থান পরিবর্তন করা যায় (লেখা ডানে, বামে, মধ্যখানে কিংবা উভয়দিকে সমানভাবে সেট করা যায়)।
<h2> align=”left”>left alignment
<h3> align=”right”>right alignment
<h4> align=”center”>center alignment
<h5> align=”justify”>justify alignment
<h2> align=”left”>left alignment
<h3> align=”right”>right alignment
<h4> align=”center”>center alignment
<h5> align=”justify”>justify alignment
Marque Tag এর ব্যবহারঃ
হেডিং বা অন্য কোন লেখাকে চলমান (একদিক থেকে অন্যদিকে নেয়া) করার জন্য উক্ত Marquee Tool ব্যবহার করা হয়। মনে করুন, আপনার ওয়েব পেইজের হেডিং দিলেন “Bangladesh is a beautiful country”। এ লেখাটুকুকে চলমান করার জন্য নিম্নের কোড ব্যবহার করা যাবেঃ
হেডিং বা অন্য কোন লেখাকে চলমান (একদিক থেকে অন্যদিকে নেয়া) করার জন্য উক্ত Marquee Tool ব্যবহার করা হয়। মনে করুন, আপনার ওয়েব পেইজের হেডিং দিলেন “Bangladesh is a beautiful country”। এ লেখাটুকুকে চলমান করার জন্য নিম্নের কোড ব্যবহার করা যাবেঃ
<marquee>Bangladesh is a beautiful country</marquee.>
উক্ত কোড ব্যবহার করলে নিম্নরুপ দেখাবেঃ
Bangladesh is a beautiful country
Bangladesh is a beautiful country
Marquee Tag এ নিম্নের এট্টিবিউটগুলো ব্যবহার করা যেতে পারে-
behaviour=”scroll”
direction=”right” [বাম থেকে ডান দিকে যাবে]
direction=”left” [ডান থেকে বাম দিকে যাবে]
scroll amount=”3″ [Scroll সংখ্যা ৩]
behaviour=”scroll”
direction=”right” [বাম থেকে ডান দিকে যাবে]
direction=”left” [ডান থেকে বাম দিকে যাবে]
scroll amount=”3″ [Scroll সংখ্যা ৩]
এট্টিবিউটসহ marquee tag এর নমূনা নিম্নরূপঃ
<marquee behaviour=”scroll” direction=”right” scroll amount=”4″>Bangladesh is a beautiful country</marquee.>
<marquee behaviour=”scroll” direction=”right” scroll amount=”4″>Bangladesh is a beautiful country</marquee.>
উক্ত এট্টিবিউট ব্যবহারের পর নিম্নরূপ দেখাবেঃ
Bangladesh is a beautiful country
Bangladesh is a beautiful country
০২। Paragraph Tag: <p>…</p>
এক অথবা অসংখ্য প্যারাগ্রাফ তৈরির জন্য উল্লেখিত (<p>…</p>) ট্যাগ ব্যবহার করা হয়। উক্ত ট্যাগের মাঝে টেক্সট এবং প্রয়োজনে টেক্সটের মাঝে ইমেজও সেট করা যায়। প্যারাগ্রাফ ট্যাগটির শেষ ট্যাগ অপশনাল অর্থাৎ না দিলেও প্যারাগ্রাফ তৈরি হবে। Heading এর ন্যায় Paragraph এ লেখা ডিফল্ট ভাবে বাম এ্যালাইন (বামদিকের অংশ সারিবদ্ধ) থাকে। উক্ত এ্যালাইন পরিবর্তন করে ডান, সেন্টার কিংবা উভয়দিকে সমান করা যায়। সেজন্য Align=”right”, align=”centre” or align=”justify” ব্যবহার করা যায়।
এক অথবা অসংখ্য প্যারাগ্রাফ তৈরির জন্য উল্লেখিত (<p>…</p>) ট্যাগ ব্যবহার করা হয়। উক্ত ট্যাগের মাঝে টেক্সট এবং প্রয়োজনে টেক্সটের মাঝে ইমেজও সেট করা যায়। প্যারাগ্রাফ ট্যাগটির শেষ ট্যাগ অপশনাল অর্থাৎ না দিলেও প্যারাগ্রাফ তৈরি হবে। Heading এর ন্যায় Paragraph এ লেখা ডিফল্ট ভাবে বাম এ্যালাইন (বামদিকের অংশ সারিবদ্ধ) থাকে। উক্ত এ্যালাইন পরিবর্তন করে ডান, সেন্টার কিংবা উভয়দিকে সমান করা যায়। সেজন্য Align=”right”, align=”centre” or align=”justify” ব্যবহার করা যায়।
প্যারাগ্রাফকে সুন্দর করে ফুটিয়ে তোলার জন্য আরও কিছু ট্যাগ ব্যবহার করা যেতে পারে সেগুলো নিম্নে উপস্থাপন করা হলোঃ
লাইন ব্রেক (<br>) ট্যাগঃ একটি প্যারা্গ্রাফ শেষ হলে আরেকটি প্যারাগ্রাফ লিখার জন্য নতুন প্যারাগ্রাফ ট্যাগ ব্যবহার না করে লাইন ব্রেক (<br>) ট্যাগ ব্যবহার করা যায়। উক্ত ট্যাগ ব্যবহার করার ফলে এক লাইন ফাঁকা স্থান রেখে আরেকটি নতুন লাইন তৈরি করে।
লাইন ব্রেক (<br>) ট্যাগঃ একটি প্যারা্গ্রাফ শেষ হলে আরেকটি প্যারাগ্রাফ লিখার জন্য নতুন প্যারাগ্রাফ ট্যাগ ব্যবহার না করে লাইন ব্রেক (<br>) ট্যাগ ব্যবহার করা যায়। উক্ত ট্যাগ ব্যবহার করার ফলে এক লাইন ফাঁকা স্থান রেখে আরেকটি নতুন লাইন তৈরি করে।
নন ব্রেকিং স্পেস ( ) এর ব্যবহারঃ এইচটিএমএল এ স্পেসবারের সাহায্যে একাধিক স্পেস দিলেও প্রোগ্রাম রান করালে তা প্রদর্শিত হয় না। তাই দুইটি লেখার মাঝে কিছুটা বেশি ফাঁকা রাখার জন্য নন ব্রেকিং স্পেস ( )দিতে হয়। উক্ত কোডটি যতবার ব্যবহার করা হবে ততটি স্পেসের সমান কাজ করবে।
হোয়াইট স্পেস (<pre>…</pre>) ট্যাগের ব্যবহারঃ কেহ যদি নন ব্রেকিং স্পেস ( ) ব্যবহার করতে না চায় তাহলে <pre> ট্যাগ ব্যবহার করলে স্পেস-এ কাজ করবে। অর্থাৎ <.pre> ট্যাগ ব্যবহার করলে যতগুলো স্পেস দিবে ততগুলো স্পেস অনুসারে আউটপুট পাওয়া যাবে।
রেখা তৈরি করার জন্য <hr> ট্যাগ এর ব্যবহারঃ ওয়েব পেজে আনুভূমিক রেখা তৈরি করার জন্য উক্ত <hr> ট্যাগ ব্যবহার করা হয়ে থাকে। ট্যাগটির শেষ ট্যাগ নেই। যেমন- আপনি ওয়েব পেজে একটি সরল রেখা দিতে ইচ্ছে পোষণ করছেন যা পেজের মাঝখানে থাকবে, ৮ পিক্সেল মোটা হবে, পেজের অর্ধাংশ জুড়ে রেখাটি নীল রং এর হবে। তার কমান্ড নিম্নরূপঃ
<hr align=”center” size=”8″ width=”50%” color=”blue”>
লেখাকে বোল্ড/ইটালিক/আন্ডারলাইন করাঃ ওয়েব পেজের কোন লেখাকে বোল্ড, ইটালিক ও আন্ডারলাইন করতে চাইলে বোল্ড করার কমান্ড <b> ইটালিক করার কমান্ড <i> আন্ডারলাইন করার কমান্ড <u>। আপনি যদি ইচ্ছে করলে একটি অথবা সবক’টি কমান্ড একসাথে প্রয়োগ করতে পারবেন। একসাথে বোল্ড, ইটালিক ও আন্ডারলাইন প্রয়োগের জন্য কমান্ড নিম্নরূপঃ
<b><i><u>Allah is almighty</b></i></u>
<b><i><u>Allah is almighty</b></i></u>
ফ্রন্ট ট্যাগের ব্যবহার <front>…</front>:
ফ্রন্ট ট্যাগ ব্যবহার করে ফ্রন্ট সংশ্লিষ্ট কাজ সম্পন্ন করা যায়। এর সাথে ফ্রন্ট কালার, সাইজ ইত্যাদি এট্টিবিউট ব্যবহার করে ফ্রন্ট স্টাইল পরিবর্তন করা যায়। নিম্নে ফ্রন্ট সংশ্লিষ্ট কিছু এট্টিবিউট ব্যবহার করে দেখানো হলোঃ
ক) Color এট্টিবিউটের ব্যবহারঃ ফন্ট কালার পছন্দ করার জন্য উক্ত এট্টিবিউট ব্যবহার করা যায়। কোডিং হবে <font color= “green”>Allah is almighty
ফ্রন্ট ট্যাগ ব্যবহার করে ফ্রন্ট সংশ্লিষ্ট কাজ সম্পন্ন করা যায়। এর সাথে ফ্রন্ট কালার, সাইজ ইত্যাদি এট্টিবিউট ব্যবহার করে ফ্রন্ট স্টাইল পরিবর্তন করা যায়। নিম্নে ফ্রন্ট সংশ্লিষ্ট কিছু এট্টিবিউট ব্যবহার করে দেখানো হলোঃ
ক) Color এট্টিবিউটের ব্যবহারঃ ফন্ট কালার পছন্দ করার জন্য উক্ত এট্টিবিউট ব্যবহার করা যায়। কোডিং হবে <font color= “green”>Allah is almighty
খ) Size এট্টিবিউটের ব্যবহারঃ ফন্টের সাইজ অটোমেটিকভাবে ১২ থাকে। ডিফল্ট সাইজের সাথে +/- (যোগ অথবা বিয়োগ) চিহ্ন দিয়ে ১-৭ সংখ্যা ব্যবহার করে ফন্টের আকার পরিবর্তন করা যায়। প্রতি মাত্রায় ফন্ট সাইজ ২ (দুই) পয়েন্ট করে বড় কিংবা ছোট হয়। নিম্নে কিছু উদাহরণ দেয়া হলোঃ
<font size=+2>Man cannot live alone</font> [+2 ফন্ট এর মান 16 পয়েন্ট]
<font size=-1>Man cannot live alone</font> [-1 ফন্ট এর মান 10 পয়েন্ট]
<font size=+2>Man cannot live alone</font> [+2 ফন্ট এর মান 16 পয়েন্ট]
<font size=-1>Man cannot live alone</font> [-1 ফন্ট এর মান 10 পয়েন্ট]
ছবি (Image)/<img> ট্যাগ এর ব্যবহারঃ
একটি ওয়েব পেজকে আকর্ষণীয় করে উপস্থাপনের জন্য ছবি (Image) এর ব্যবহার করা হয়। ছবি ব্যবহারের জন্য <img> কোডটি লেখার প্রয়োজন হয়। এই ট্যাগটির শেষ ট্যাগ নেই তবে এর সাথে src এট্টিবিউট ব্যবহার করে ইমেজ লোকেশান জানিয়ে দিতে হবে। নিম্নে ট্যাগটি ব্যবহারের নিয়ম উল্লেখ করা হলোঃ
<img src=”images/flower.jpeg”> [ইমেজ ফাইলটি যে ফোল্ডারে থাকবে তার লোকেশান দেখিয়ে দিতে হবে]
একটি ওয়েব পেজকে আকর্ষণীয় করে উপস্থাপনের জন্য ছবি (Image) এর ব্যবহার করা হয়। ছবি ব্যবহারের জন্য <img> কোডটি লেখার প্রয়োজন হয়। এই ট্যাগটির শেষ ট্যাগ নেই তবে এর সাথে src এট্টিবিউট ব্যবহার করে ইমেজ লোকেশান জানিয়ে দিতে হবে। নিম্নে ট্যাগটি ব্যবহারের নিয়ম উল্লেখ করা হলোঃ
<img src=”images/flower.jpeg”> [ইমেজ ফাইলটি যে ফোল্ডারে থাকবে তার লোকেশান দেখিয়ে দিতে হবে]
Width ও Height এট্টিবিউটের ব্যবহারঃ ওয়েব পেজে ইমেজের সাইজ কতটুকু হবে তা নির্ধারণ করে দেয়ার জন্য <img> ট্যাগের মধ্যে width ও height এট্টিবিউট ব্যবহার করা হয়। এদের মান প্রকাশ করা হয় পিক্সেলে। যেমনঃ
<img src=”images/flower.jpeg” width=”400” height=”250”.>
<img src=”images/flower.jpeg” width=”400” height=”250”.>
Align এট্টিবিউট-এর ব্যবহারঃ ইমেজটি পেজের কোনদিকে প্রদর্শিত হবে তা নির্ধারণ করে দেয়ার জন্য উক্ত এট্টিবিউট ব্যবহার করা হয়। যেমনঃ
<img src=”images/flower.jpeg” align=”left”>
[align=”top”/”middle”/”bottom”/”right”..]
<img src=”images/flower.jpeg” align=”left”>
[align=”top”/”middle”/”bottom”/”right”..]
Alt এট্টিবিউটের ব্যবহারঃ কোন ব্রাউজার যদি ইমেজ প্রদর্শন করতে ব্যর্থ হয় অথবা ব্যবহারকারী ইমেজ বন্ধ করে রাখে তাহলে ইমেজের স্থানে একটি লোগো দেখা যেতে পারে যার উপর মাউস নিলে ইমেজ সম্পর্কে একটি তথ্য পাওয়া যাবে। নিম্নে Alt এট্টিবিউটের ব্যবহার দেখানো হলোঃ
<img src=”images/flower.jpeg” alt=”joomla admin panel picture”>
Supporting Image Formates: .jpg, .jpeg, .bmp, .png, .tift, .xbm, .gif (অর্থাৎ এইচটিএমএল সাধারণত উক্ত ফাইলগুলো সাপোর্ট করে)।
Hyperlink Tag <a>…</a> এর ব্যবহারঃ
ওয়েব পেজের একটি লিংকে ক্লিক করার মাধ্যমে একই ওয়েব সাইটের অন্য পেজ কিংবা অন্য যে কোন ওয়েব সাইটে যাওয়া যায়। অর্থাৎ লিংক সাধারণত দুই প্রকার। যথা- ইন্টারনাল লিংক ও এক্সটারনাল লিংক। যে লিংকের মাধ্যমে একটি ওয়েব পেজের অন্যান্য পৃষ্ঠার সাথে সংযোগ করে তাকে ইন্টারনাল লিংক এবং যে লিংকের মাধ্যমে অন্য ওয়েবের বিভিন্ন পৃষ্ঠার সাথে সংযোগ করে তাকে এক্সটারনাল লিংক বলে। আর সে জন্য যে ট্যাগ লিখা হয় তাকে হাইপার ট্যাগ লিংক বলা হয়। নিম্নে হাইপার ট্যাগ লিংক দেখানো হলোঃ
<a href=”computer kinds.html” alt=””>”How many kinds of Computer?”</a>
ওয়েব পেজের একটি লিংকে ক্লিক করার মাধ্যমে একই ওয়েব সাইটের অন্য পেজ কিংবা অন্য যে কোন ওয়েব সাইটে যাওয়া যায়। অর্থাৎ লিংক সাধারণত দুই প্রকার। যথা- ইন্টারনাল লিংক ও এক্সটারনাল লিংক। যে লিংকের মাধ্যমে একটি ওয়েব পেজের অন্যান্য পৃষ্ঠার সাথে সংযোগ করে তাকে ইন্টারনাল লিংক এবং যে লিংকের মাধ্যমে অন্য ওয়েবের বিভিন্ন পৃষ্ঠার সাথে সংযোগ করে তাকে এক্সটারনাল লিংক বলে। আর সে জন্য যে ট্যাগ লিখা হয় তাকে হাইপার ট্যাগ লিংক বলা হয়। নিম্নে হাইপার ট্যাগ লিংক দেখানো হলোঃ
<a href=”computer kinds.html” alt=””>”How many kinds of Computer?”</a>
<a href=”www.masudcomputerbd.blogspot.com” alt=””>”The Daily Nayadiganta”</a>
উপরোক্ত প্রথম লিংকের মাধ্যমে ইন্টারলিংকের উদাহরণ দেখানো হলো আর দ্বিতীয় লিংকের মাধ্যমে এক্সটারনাল লিংকের উদাহরণ দেখানো হলো।
ইমেজকে লিংক রূপে ব্যবহার করাঃ যে কোন ইমেজকে লিংক রূপে ব্যবহার করার জন্য কোড নিম্নরূপ-
<a href=”www.masudcomputerbd.blogspot.com” alt=””><img src=”images/flower.jpeg”</a>
<a href=”www.masudcomputerbd.blogspot.com” alt=””><img src=”images/flower.jpeg”</a>
HTML এ বিভিন্ন লিস্টের ব্যবহারঃ
তথ্যাবলীকে সুন্দরভাবে উপস্থাপন করার জন্য লিস্ট উপাদান ব্যবহার করা হয়ে থাকে। <li>… ট্যাগ দিয়ে লিস্ট উপাদান তৈরি করা হয়। এই ট্যাগটির শেষ ট্যাগ ঐচ্ছিক। এইচটিএমএল এ কয়েক ধরনের লিস্ট তৈরি করা যায়। নিম্নে তা উপস্থাপন করা হলোঃ
তথ্যাবলীকে সুন্দরভাবে উপস্থাপন করার জন্য লিস্ট উপাদান ব্যবহার করা হয়ে থাকে। <li>… ট্যাগ দিয়ে লিস্ট উপাদান তৈরি করা হয়। এই ট্যাগটির শেষ ট্যাগ ঐচ্ছিক। এইচটিএমএল এ কয়েক ধরনের লিস্ট তৈরি করা যায়। নিম্নে তা উপস্থাপন করা হলোঃ
(ক) Ordered List: Serial Number অনুযায়ী তথ্যাবলীকে উপস্থাপনের জন্য উক্ত লিস্ট ব্যবহার করা যায়। এই লিস্ট প্রকাশ করা হয় <ol>… ট্যাগ দিয়ে। তার সাথে type এট্টিবিউট ব্যবহার করে সিরিয়াল নাম্বার-এর ধরণ নির্ধারণ করা যায়। যেমন-
<ol type=”a”>
<li>Monitor
<li>Keyboard
<li>Mouse
</ol.>
উপরোক্ত কোড ব্যবহার করলে আউটপুট হবে নিম্নরূপঃ
a. Monitor
b. Keyboard
c. Mouse
<ol type=”a”>
<li>Monitor
<li>Keyboard
<li>Mouse
</ol.>
উপরোক্ত কোড ব্যবহার করলে আউটপুট হবে নিম্নরূপঃ
a. Monitor
b. Keyboard
c. Mouse
উল্লেখ্য, type=”a” দেয়ার ফলে আউটপুট a, b, c ক্রমানুসারে আসবে। type=”1” দিলে আউটপুট 1, 2, 3 সিরিয়াল অনুযায়ী আসবে আবার type=”i” দিলে আউটপুট রোমান সংখ্যা i, ii, iii ক্রমানুসারে প্রদর্শিত হবে। ইচ্ছেকরলে সিরিয়ালে বড় হাতের সংখ্যাও ব্যবহার করা যায়। তাহলে আউটপুট-ও বড় হাতের প্রদর্শিত হবে।
খ. Unordered List: Serial No. না দিয়ে তার পরিবর্তে প্রতীক ব্যবহার করার জন্য উক্ত Unordered List বা <ul>…</ul> ট্যাগ ব্যবহার করা হয়ে থাকে। তার সাথেও Type এট্টিবিউট ব্যবহার করা যায়। যেমন-
<ul type=”Circle”>
<li>ROM
<li>RAM
<li>DISC
<li>Processor
<li>Motherboard
</ul>
<ul type=”Circle”>
<li>ROM
<li>RAM
<li>DISC
<li>Processor
<li>Motherboard
</ul>
উল্লেখিত কোড ব্যবহার করা হলে আউটপুট নিম্নরূপ আসবেঃ
o ROM
o RAM
o DISC
o Processor
o Motherboard.
o ROM
o RAM
o DISC
o Processor
o Motherboard.
Type এট্টিবিউটে Square & Disc নামে আরও দু’টি মান ব্যবহার করা যায়।
টেবিল <table>…</table> ট্যাগ-এর ব্যবহারঃ
সুন্দর ওয়েব পেজ বিনির্মানে টেবিল তৈরির গুরুত্ব অপরিসীম। টেবিল তৈরি করার জন্য উল্লেখিত ট্যাগ ছাড়া আরও কিছু ট্যাগ ব্যবহার করার প্রয়োজন হয়। যেমন- সারি তৈরি করার জন্য <tr>…</tr> ট্যাগ, সারিতে ডাটা ইনপুট করার জন্য <td>…</td> ট্যাগ এবং সারির শিরোনাম দেয়ার জন্য <th>…</th> ট্যাগের ব্যবহার করতে হয়।নিম্নে একটি টেবিলের কোডিং দেখানো হলোঃ
<table border=”1″ align=”center”>
<tr>
<th>No.</th>
<th>Name</th>
<th>Designation</th>
<th>Salary</th>
</tr>
<tr>
<td>01.</td.>
<td>Fahad</td.>
<td>Officer</td.>
<td>15000</td.>
</tr>
<tr>
<td>02.</td>
<td>Karim</td>
<td>Executive Officer</td>
<td>25000</td>
</tr>
<tr>
<td>03.</td>
<td>Mannan</td>
<td>Senior Officer</td>
<td>20000</td>
</tr>
<tr>
<td>04.</td>
<.td>Mahmud</td>
<td>Officer</td>
<td>15000</td>
</tr>
</table>
সুন্দর ওয়েব পেজ বিনির্মানে টেবিল তৈরির গুরুত্ব অপরিসীম। টেবিল তৈরি করার জন্য উল্লেখিত ট্যাগ ছাড়া আরও কিছু ট্যাগ ব্যবহার করার প্রয়োজন হয়। যেমন- সারি তৈরি করার জন্য <tr>…</tr> ট্যাগ, সারিতে ডাটা ইনপুট করার জন্য <td>…</td> ট্যাগ এবং সারির শিরোনাম দেয়ার জন্য <th>…</th> ট্যাগের ব্যবহার করতে হয়।নিম্নে একটি টেবিলের কোডিং দেখানো হলোঃ
<table border=”1″ align=”center”>
<tr>
<th>No.</th>
<th>Name</th>
<th>Designation</th>
<th>Salary</th>
</tr>
<tr>
<td>01.</td.>
<td>Fahad</td.>
<td>Officer</td.>
<td>15000</td.>
</tr>
<tr>
<td>02.</td>
<td>Karim</td>
<td>Executive Officer</td>
<td>25000</td>
</tr>
<tr>
<td>03.</td>
<td>Mannan</td>
<td>Senior Officer</td>
<td>20000</td>
</tr>
<tr>
<td>04.</td>
<.td>Mahmud</td>
<td>Officer</td>
<td>15000</td>
</tr>
</table>
উল্লেখিত কোডের বিপরীতে আউটপুট আসবে নিম্নরূপঃ
No. Name Designation Salary
01. Fahad Officer 15000
02. Karim Executive Officer 25000
03. Mannan Senior Officer 20000
04. Mahmud Officer 15000
No. Name Designation Salary
01. Fahad Officer 15000
02. Karim Executive Officer 25000
03. Mannan Senior Officer 20000
04. Mahmud Officer 15000
টেবিলে যে সকল এট্টিবিউট ব্যবহার করা যায় তা হচ্ছে- align, width, border, cellspacing, cellpadding & bgcolor etc.
এইচটিএমএল বিষয়ে আরো অধিক জানার জন্য এর Masud Computer BD ওয়েব সাইট কর্তৃপক্ষের সাথে যোগাযোগ করতে পারেন।