আসসালামু আলাইকুম!! অনেকদিন পরে আবার HTML নিয়ে ফিরে এলাম। দুঃখিত আমার পার্সোনাল লেখাপড়ায় এক্টূ ব্যস্ত থাকায় এই বিষয়ে পোস্ট করতে পারছিলাম না। ইনশাল্লাহ!! এখন থেকে নিয়মিত পোস্ট পাবেন।।
আজকের আলোচনার প্রথম অধ্যায়ঃ-
HTML Images
আমরা আগেই দেখেছি যে কিভাবে ইমেজ এড করতে হয়। এখন তারই একটু এডভান্স পর্যন্ত জানবো!!
HTML Image Syntax:–
ইমেজ যোগ করতে আমরা <img> ট্যাগ ব্যবহার করি।
<img src="url" alt="some_text">
উপরের এই কোডে src এট্রিবিউট এর মাধ্যমে ইমেজের এড্রেস বলে দেয়া হয় এবং alt এট্রিবিউট এর মাধ্যমে ব্যাকআপ টেক্সট দেয়া হয়। ধ্রুন কোন কারনে একটা ইমেজ লোড হয় নি তখন সেই ইমেজের পরিবর্তে এই ব্যাকআপ টেক্সট বা অল্টারনেটিভ টেক্সট দেখায়। মানে, ছবি না আসলে তার পরিবর্তে এই লেখা দেখায়।।
HTML Image Style:–
ছবিতে নানারকম স্টাইল করা যায় যেমন ছবির Width বা height বা float ঠিক করে দেয়া যায়।
Width দিয়ে বোঝায় ছবির প্রস্থ বা আড়াআড়ি ভাবে কত টুকু হবে এবং height দিয়ে দৈর্ঘ্য বা উচ্চতা বোঝায়। আর এই float দিয়ে বোঝায় স্ক্রিনের কোথায় ছবি থাকবে। নিচের উদাহরণ দেখলেই বুঝবেন।
<img src="programming.gif" alt="Computer man" style="width:36px;height:48px;float:right;">
এই কোডটুকুর আউটপুট দেখুন তাহলে দেখবেন যে ছবিটার width এবং height হয়েছে যথাক্রমে 36 এবং 48 করে। আর ছবিটা আছে স্ক্রিনের ডান পাশে কারন float এর ভ্যালু দেয়া আছে right.
HTML Image Link
আমরা চাইলে কোন ইমেজকে লিংক হিসেবেও ব্যবহার করতে পারি। আপনি হয়ত দেখে থাকবেন কোন কোন সাইটে সুন্দর একটা ইমেজে লেখা থাকে Download Now আপনি সেখানে ক্লিক করলেই ডাউনলোড হয় বা অন্য লিংক এ চলে যায়। এটা করতে Image link ব্যবহার করতে হয়। নিচের কোডে দেখুন।
<a href="https://youtube.com><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"></a>
এখানে ওই লিংক এর কাজ কিন্তু লিংক এ যেমন টেক্সট দিয়েছিলাম এখানে শুধু তার পরিবর্তে দিয়েছি Image.
আর আমরা ইমেজ টা দিয়েছি .gif ফরম্যাটের মানে এনিমেটেড ইমেজ। আমরা চাইলে যেকোন ফরম্যাটের ইমেজ ব্যবহার করতে পারি। যেমনঃ- jpg, jpeg, png, bmp, webpm, gif ইত্যাদি ইত্যাদি।
HTML Table
আমরা নিশ্চয় টেবিল এর সঙ্গে পরিচিত। আসবাবপত্রের টেবিল না টেক্সট টেবিল। মাইক্রোসফট ওয়ার্ড এ কাজ করতে গিয়ে আমরা দেখেছি টেবিল। আবার যে পরিসংখ্যান এর অংকে ছক থাকে সেটাই টেবিল। আরে!! টেবিল মানেই তো ছক।
আমরা আমাদের ওয়েব পেজেও টেবিল ব্যবহার করতে পারি। আগে নিচের কোডটা দেখে নেই তারপর ব্যাখ্যা করব।
<!DOCTYPE html> <html> <body> <table> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html>
আগে নিজে নিজে আউটপুট দেখে নিন। টেবিল ডিফাইন করা হয় <table> ট্যাগের মাধ্যমে। তারপর দিয়েছি <tr> ট্যাগ যার অর্থ টেবিলের সারি বা Table Row।
পরেও একি কাজ হয়েছে। নিজে নিজে লিখে চেষ্টা করুন তাহলেই হবে।
আমরা আগের এক্সাম্পলে দেখেছি জাস্ট টেবিল। কিন্তু নিচের কোড এর মাধ্যমে সেই টেবিলে বর্ডার ও দিতে পারবো।
<!DOCTYPE html> <html> <body> <table border="1" style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr></table> </body> </html>
এখানে আমরা Table ট্যাগের border এট্রিবিউট দিয়ে বুঝিয়েছি বর্ডার এর ঘনত্ব। এবং তার ভ্যালু দিয়েছি 1 । আপনারা ভ্যালু চেঞ্জ করে দেখেন বুঝতে পারবেন। এবং টেবিল এর style এট্রিবিউট এর মাঝে width এর ভ্যালু সেট করেছি 100% ।
আমরা চাইলে Table এর হেডিং ও দিতে পারি। নিচের মতো করে <th> ট্যাগের মাধ্যমেই সেটা সম্ভব।
<!DOCTYPE html> <html> <head> </head> <body> <table border="1" style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html>
আমাদের প্রয়োজন মতো হেডিং আমরা ব্যবহার করতে পারবো।
আমরা যেমন বিভিন্ন ছবির সাথে ক্যাপশন দেই তেমনি টেবিল এর সাথেও ক্যাপশন দিতে পারি।
<!DOCTYPE html> <html> <head> </head> <body> <table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> </body> </html>
টেবিলে ক্যাপশন দিতে <caption> ট্যাগ ব্যবহার করা হয়।
এখানে আমি শুধু সেগুলোই আলোচনা করলাম যেগুলো সিএসএস না জেনেই পারা যায়। পরে আমি যখন সিএসএস দেখাবো তখন আরো অনেক স্টাইল দেখাবো। আপনারা চাইলে এখনই চেষ্টা করতে পারেন।
HTML List
লিস্ট বললেই আমরা বুঝতে পারি এটা একটা ফর্দ বা তালিকা। আমাদের ওয়েব পেজে চাইলেই আমরা List ব্যবহার করতে পারি।
লিস্ট দুই ধরণের হয়।
- এক হচ্ছে Unorder List
- অন্যটা হচ্ছে Order List
Unorder List হচ্ছে যেগুলোতে নাম্বার দেয়া থাকে না মানে গোল চিহ্ন থাকে বা কোন স্টাইল এরকম কিছু।
<!DOCTYPE html> <html> <body><h2>Unordered List with Default Bullets</h2> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
Unorder লিস্ট ডিফাইন এর ক্ষেত্রে <ul> ট্যাগ ব্যবহার করতে হয় এবং List এর ভ্যালু হিসেবে <li> ট্যাগ ব্যবহার করা হয়। খুব সিম্পল কাজ।
Unorder List Style Type
আমরা শুধু গোল চিহ্ন না আরো অনেক কিছুই ব্যবহার করতে পারি Unorder স্টাইল এর ক্ষেত্রে। নিচের উদাহরণ গুলো দেখলেই বুঝতে পারবেন।
Disc Style:–
<ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
Circle Style:–
<ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
Square Style:–
<ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
None Style:–
<ul style="list-style-type:none"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
কোডগুলো রান করলেই বুঝতে পারবেন কোনটা কেমন স্টাইলের।।
এবারে Order লিস্ট হচ্ছে যেগুলোতে নাম্বার দেয়া থাকে। সেটা a, b, c বা 1, 2, 3 বা i, ii, iii হতে পারে।
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
Order লিস্ট এর ক্ষেত্রে শুধু <ol> ব্যবহার করা হয় তাছাড়া সব একই রকম।
আমরা বিভিন্ন স্টাইলের Order ব্যবহার করতে পারি।
Uppercase Style:–
<ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
Lowercase Style:–
<ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
Uppercase Roman Style:–
<ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
Lowercase Roman Style:–
<ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
HTML List Description
আমরা লিস্ট এর কোন আইটেম সমন্ধে বাড়তি তথ্য দিতে Description List ব্যবহার করতে পারি। যেমন
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
এখানে <dl> বোঝায় description list এবং তার মধ্যে <dt> দিয়ে যেটার ব্যখ্যা করব সেটার নাম দিতে হয়। এবং শেষে <dd> এর মাধ্যমে বিস্তারিত লিখেছি। একদম সিম্পল কাজ। তবে, নিজে করে না দেখলে শিখতে পারবেন না।
HTML Nested List
আমরা লিস্টের ভেতরে আবার লিস্ট ব্যবহার করতে পারি।
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>
এখানে বাড়তি কিছুই করা হয় নি। শুধু যেখানে আলাদা ভাবে Nested List ব্যবহার করার দরকার ছিল সেখানে নতুন List ডিফাইন করেছি।।
HTML Iframes
আমরা মাঝে মাঝে দেখি কোথাও ওয়েব পেজের মাঝে ছোট একটা সেকশনে অন্য পেজ। মানে, রেজাল্ট দেখার জন্য যখন গুগলে সার্চ করি তখন দেখি বিভিন্ন সাইটে Education Board এর ওই রেজাল্ট সাবমিটের সেকশন টুকু আলাদা ভাবে দেয়া আছে। এটাই করা হয় Iframe এর মাধ্যমে।
<iframe src="URL"></iframe>
খুব সিমপ্লি শুধু URL এর জায়গায় ওই কাঙ্খিত সাইটের এড্রেস দিলেই হবে। নিজে নিজে ট্রাই করে দেখুন।
আমরা আগে যেমন কোন কিছুর Width এবং Height সেট করা দেখেছি। সেরকম এখানেই style এট্রিবিউট দিয়ে width, Height সেট করা যায়।
আজকের মতো এখানেই শেষ। দুঃখিত, হয়তো আগের মতো বিস্তারিত ভাবে বুঝিয়ে লেখা হলো না। আমি ইচ্ছা করেই এমন করেছি। কারন, নিজেরা কোড না করলে কিছু বোঝা সম্ভব না। যদি কোন প্রশ্ন বা সমস্যা থাকে তাহলে কমেন্টে বলুন।
একটা বাড়ির কাজ দেই। আমি আজ কি কি শেখালাম সেগুলোর নাম দিয়ে একটা লিস্ট তৈরি করুন। আর একটা টেবিলও তৈরি করুন যেন হেডিং থাকে তার সাথে।
আর, পছন্দের একটা ইমেজ দিলে তো প্লাস পয়েন্ট। যদি ফোনে এম্বি থাকে তাহলে Iframe এর মাধ্যমে 140 Width এবং 130 height এর sololearn.com এই সাইটের সেকশন বানাবেন।
তবে, প্রজেক্ট করে জমা দিতে পারবেন না। কারন, আমি ফেসবুক একাউন্ট পারমানেন্ট ডিলিট করে দিয়েছি। তাই, সেটা তৈরি করে আমাকে ইমেইল করতে পারেন। আমার ইমেইল এড্রেস হচ্ছে [email protected]
ধন্যবাদ!! সাথেই থাকুন। ইনশাল্লাহ খুব দ্রুত নেক্সট পার্ট এসে যাবে। এবং সেখানে থাকবে HTML Form নিয়ে A-Z.
আসসালামু আলাইকুম!! আমি শাহরিয়ার আহমেদ শোভন।
আরো ভালো আর্টিকেল পেতে চলে যান এই লিংক এ www.thebanglatech.xyz
16 thoughts on "৭ দিনে শিখুন HTML – ৪র্থ দিন — পর্ব ০৪"