Home
Events
Search
Latest images
Register
Log in
AdminAdmin- Posts : 24
Join date : 2018-05-15 
HTML পর্ব ৫। #HTML
Thu May 31, 2018 1:41 pm
স্বাগতম প্রিয় মিনিল্যাব মেম্বার ও অতিথিরা। আমি আপনাদের শুরুতেই রিকোয়েস্ট করব আমাদের ফোরামে সাইন আপ করতে, এটি ফ্রি ও খুব সোজা। আপনি সাইনাপ করার পর ফোরামে রিপ্লাই, টপিক পোস্ট করা সহ আরো অনেক কিছু করতে পারবেন।
যাই হোক, আজকের পর্ব নম্বর ৫ , এবং এই পর্বে আমি লিখছি মাহাবুব হাসান। নিচে দিয়ে দিচ্ছি গুরুত্বপূর্ন কিছু লিংক এবং শুরু করছি আজকের পর্ব।
লিংকসঃ
* প্রথম পর্ব
* ফেইসবুক গ্রুপ
* লাইভ চ্যাটের জন্যে পাশে ম্যাসেজ বা নিড হেল্প বাটনে প্রেস করুন। আমি আছি সকাল ১০ টা থেকে রাত ১০ টা।
কালকে যা যা শিখলামঃ
১। ডকুমেন্ট ফর্মেটিং বা সাজসজ্জা।
২। এইচটিএমএল কমেন্ট বা মন্তব্য।
৩। এইচটিএমএল এংকর ট্যাগ ও লিংক।
৪। এইচটিএমএল লাইন ব্রেক ও হরিজন্টাল লাইন।
আজকে যা যা শিখবোঃ
১। ছবি বসানো
২। ডিভ ও স্প্যান ট্যাগ
৩। এইচটিএমএল টেবিল
আপনার ডকুমেন্টের সৌন্দর্য বাড়াতে ও আরো আকর্ষনী করতে ছবি যোগ করতে পারেন। ছবি যোগ করতে আমরা <img> ট্যাগ ব্যাবহার করি। ইমেজ ট্যাগ এর সাথে আরো কিছু এট্রিবিউট যোগ করে আমরা ছবি যোগ ও নিয়ন্ত্রন ও সাইজ কমাতে বাড়াতে পারি। আমরা নিচে একটি নমুনা দেখি।
এই ছবিটির সাইজ প্রায় ৩০০ পিক্সেল। পিক্সেল হলো একটি ডিজিটাল ছবি মাপার একক। ১০ লাখ পিক্সেল = ১ মেগা পিক্সেল। এখন আমরা ছবিটি বসানোর কোড দেখে নিই।
রেজাল্টঃ
এখন আমরা একটু কাঠিন্য দেখছি। অনেক জিনিসই বুঝতে পারছিনা তাই না?
ইমেজ সেট রুলগুলো দেখলেই আমরা ব্যাপারটা বুঝতে পারবো।
* ইমেজ আপনার পিসি থেকে নিতে হলে যেই ডিরেক্টরিতে ছবিটি আছে সেই পুরো ডিরেক্টরি কপি করে src এট্রিবিউটে বসাতে হবে।
* মোবাইল থেকে নিতে হলে যেই ফোল্ডারে আপনার এইচটিএমএল ফাইলটি আছে সেখানে একটা পিকচার ফোল্ডার তৈরী করে আপনার ছবিটি ওই ফোল্ডারে কপি করে রাখবেন। রেখে src তে আপনি picture/image name.jpg দিবেন।
* আপনি যদি আরো সোজা কিছু চান। তাহলে কোন ইমেজ সার্ভার ব্যাবহার করবেন। যেমন servimg.com . এই সাইটে আপনি একাউন্ট ক্রিয়েট করে সেখানে ছবি আপলোড করে সেখান থেকে ইমেজ লিংক নিয়ে src তে পেস্ট করবেন।
এখন আমরা আরো কিছু শিখবো ইমেজ নিয়ে।
ইমেজ সাইজ নিয়ন্ত্রন করতে আমরা height এবং width এট্রিবিউট ব্যাবহার করব। যেমন
ইমেজ কোন কারনে লোড না হলে শব্দ দেখাতে হয়। তাই অবশ্যই অবশ্যই alt এট্রিবিউট ব্যাবহার করতে হবে। যেমন
ইমেজ এর প্রস্থ ইচ্ছেমতো দিলেও উচ্চতা ঠিকঠাক বসে যাবে যদি height="auto" দিই। এটি একটি সোজা অপশন যদি আপনি কোন ছবির প্রস্থ ও উচ্চতার অনুপাত ঠিক না রাখতে পারেন ।
এই ট্যাগটি অনেকেই আপাতত বাদ দিতে পারেন কারন এটি এখন আপাতত বেশী একটা ব্যাবহার করা হবে না। ডিভ ও স্প্যান ট্যাগ কোন স্টাইল বা ক্লাস যোগ করতে ব্যাবহার করা হয়। এর ভেতর ডিভ বা <div> হলো ব্লক লেভেল। বা ডিভ ট্যাগ ইউজ করলে স্বয়ংক্রিয় ভাবে ব্লক সৃষ্টি হয়ে যাবে।
এর মানে হলো দুটো <h1> দিলে যেমন এক লাইনে থাকে না। আলাদা লাইনে নেমে যায়। তেমনই ডিভ ট্যাগ ব্যাবহার করলেও এমন হবে। স্প্যান ট্যাগের কাজ ডিভ এর মতোই। কিন্তু স্প্যান ব্লক লেভেল না। তাই দুটো স্প্যান ট্যাগ একই লাইনে লিখলে একই লাইনেই থেকে যাবে।
ব্যাবহার ঃ ক্লাস নেম দিতে, নির্দিষ্ট কোন অংশে স্টাইল এপ্লাই করতে এই ট্যাগ ইউজ করা হয়। আমরা সিএসএস এ এই সেকশন এর সম্পূর্ন অংশ শিখবো। সাথেই থাকুন।
এইচটিএমএল এর একটু কঠিন অংশ এটি। তাই একটু মনযোগী হতে হবে আমাদের। তবেই আমরা সহজে শিখতে পারবো। টেবিল এর জন্য আমরা একটা না দুইটা না তিনটা ট্যাগ ব্যাবহার করব! একটি টেবিল ট্যাগ এবং এর ভেতরে টেবিল রো ও টেবিল ডাটা ট্যাগ ব্যাবহার করে কলাম ও সারি তৈরী করব।
টেবিলে ব্যাবহৃত ট্যাগ সমূহঃ
<table>, <tr> , <td>
টেবিল ট্যাগের ভেতর <tr>, <td> থাকে। <tr> হলো টেবিল রো বা টেবিল সারি। টেবিল সারির ভেতর <td>টেবিল ডাটা বা টেবিল তথ্য থাকে। নিম্নে আমরা একটি নমুনা দেখি।
রেজাল্টঃ
এখানে লক্ষ্য করুন। টেবিল ট্যাগ হলো মূল অংশ যেখানে টেবিলের সারি সাজাবেন। আমরা টেবিলে বর্ডার দিয়েছি border এট্রিবিউট দিয়ে ও প্রস্থ দিয়েছি width এট্রিবিউট দিয়ে। আর প্রস্থ আমরা ১০০% দিয়েছি যাতে টেবিল পুরো উইন্ডো জুড়ে থাকে। পরে আমরা সারি তৈরী করেছি <tr> দিয়ে।তারপর নং ও নাম বসিয়েছি টেবিল ডাটা বা <td> দিয়ে। আপনি টেবিল রো এর ভেতর টেবিল ডাটা যতগুলা দিবেন ততগুলা সারি হবে। আমি দুইটা টেবিল ডাটা দিয়েছি তাই দুইটা সারি হয়েছে।
অনেক অনেক ধন্যবাদ আমাদের আর্টিকেল পড়ার জন্যে। বন্ধুদের সাথে ভাগ করুন যদি দলগত ভাবে শিখতে চান। কোন সমস্যায় আমরা তো আছিই।
শুভ বিদায়
কালকে যা যা শিখবোঃ
১ । টেবিল এর কলাম বাড়ানো ও কমানো।
২। কলাম জোড়া ও ভাংগা
৩। টেবিল হেড ও বডি
৪। টেবিল স্টাইলিং
যাই হোক, আজকের পর্ব নম্বর ৫ , এবং এই পর্বে আমি লিখছি মাহাবুব হাসান। নিচে দিয়ে দিচ্ছি গুরুত্বপূর্ন কিছু লিংক এবং শুরু করছি আজকের পর্ব।
লিংকসঃ
* প্রথম পর্ব
* ফেইসবুক গ্রুপ
* লাইভ চ্যাটের জন্যে পাশে ম্যাসেজ বা নিড হেল্প বাটনে প্রেস করুন। আমি আছি সকাল ১০ টা থেকে রাত ১০ টা।
কালকে যা যা শিখলামঃ
১। ডকুমেন্ট ফর্মেটিং বা সাজসজ্জা।
২। এইচটিএমএল কমেন্ট বা মন্তব্য।
৩। এইচটিএমএল এংকর ট্যাগ ও লিংক।
৪। এইচটিএমএল লাইন ব্রেক ও হরিজন্টাল লাইন।
আজকে যা যা শিখবোঃ
১। ছবি বসানো
২। ডিভ ও স্প্যান ট্যাগ
৩। এইচটিএমএল টেবিল
সেকশনঃ ১
ছবি বসানো।
আপনার ডকুমেন্টের সৌন্দর্য বাড়াতে ও আরো আকর্ষনী করতে ছবি যোগ করতে পারেন। ছবি যোগ করতে আমরা <img> ট্যাগ ব্যাবহার করি। ইমেজ ট্যাগ এর সাথে আরো কিছু এট্রিবিউট যোগ করে আমরা ছবি যোগ ও নিয়ন্ত্রন ও সাইজ কমাতে বাড়াতে পারি। আমরা নিচে একটি নমুনা দেখি।
| নমুনা ছবি। |
- Code:
<html>
<head>
<title> A picture </title>
</head>
<body>
<img src="https://i62.servimg.com/u/f62/19/91/21/21/images10.png"></img>
</body>
</html>
রেজাল্টঃ
 |
| ইমেজ রেজাল্ট |
এখন আমরা একটু কাঠিন্য দেখছি। অনেক জিনিসই বুঝতে পারছিনা তাই না?
ইমেজ সেট রুলগুলো দেখলেই আমরা ব্যাপারটা বুঝতে পারবো।
* ইমেজ আপনার পিসি থেকে নিতে হলে যেই ডিরেক্টরিতে ছবিটি আছে সেই পুরো ডিরেক্টরি কপি করে src এট্রিবিউটে বসাতে হবে।
* মোবাইল থেকে নিতে হলে যেই ফোল্ডারে আপনার এইচটিএমএল ফাইলটি আছে সেখানে একটা পিকচার ফোল্ডার তৈরী করে আপনার ছবিটি ওই ফোল্ডারে কপি করে রাখবেন। রেখে src তে আপনি picture/image name.jpg দিবেন।
* আপনি যদি আরো সোজা কিছু চান। তাহলে কোন ইমেজ সার্ভার ব্যাবহার করবেন। যেমন servimg.com . এই সাইটে আপনি একাউন্ট ক্রিয়েট করে সেখানে ছবি আপলোড করে সেখান থেকে ইমেজ লিংক নিয়ে src তে পেস্ট করবেন।
এখন আমরা আরো কিছু শিখবো ইমেজ নিয়ে।
ইমেজ সাইজ নিয়ন্ত্রন করতে আমরা height এবং width এট্রিবিউট ব্যাবহার করব। যেমন
- Code:
<img src="https://i62.servimg.com/u/f62/19/91/21/21/images10.png" width="300px" height="500px"> </img>
ইমেজ কোন কারনে লোড না হলে শব্দ দেখাতে হয়। তাই অবশ্যই অবশ্যই alt এট্রিবিউট ব্যাবহার করতে হবে। যেমন
- Code:
<img src="https://i62.servimg.com/u/f62/19/91/21/21/images10.png" alt="Picture of HTML" width="300px" height="auto"></img>
ইমেজ এর প্রস্থ ইচ্ছেমতো দিলেও উচ্চতা ঠিকঠাক বসে যাবে যদি height="auto" দিই। এটি একটি সোজা অপশন যদি আপনি কোন ছবির প্রস্থ ও উচ্চতার অনুপাত ঠিক না রাখতে পারেন ।
সেকশনঃ ২
ডিভ ও স্প্যান ট্যাগ
এই ট্যাগটি অনেকেই আপাতত বাদ দিতে পারেন কারন এটি এখন আপাতত বেশী একটা ব্যাবহার করা হবে না। ডিভ ও স্প্যান ট্যাগ কোন স্টাইল বা ক্লাস যোগ করতে ব্যাবহার করা হয়। এর ভেতর ডিভ বা <div> হলো ব্লক লেভেল। বা ডিভ ট্যাগ ইউজ করলে স্বয়ংক্রিয় ভাবে ব্লক সৃষ্টি হয়ে যাবে।
এর মানে হলো দুটো <h1> দিলে যেমন এক লাইনে থাকে না। আলাদা লাইনে নেমে যায়। তেমনই ডিভ ট্যাগ ব্যাবহার করলেও এমন হবে। স্প্যান ট্যাগের কাজ ডিভ এর মতোই। কিন্তু স্প্যান ব্লক লেভেল না। তাই দুটো স্প্যান ট্যাগ একই লাইনে লিখলে একই লাইনেই থেকে যাবে।
ব্যাবহার ঃ ক্লাস নেম দিতে, নির্দিষ্ট কোন অংশে স্টাইল এপ্লাই করতে এই ট্যাগ ইউজ করা হয়। আমরা সিএসএস এ এই সেকশন এর সম্পূর্ন অংশ শিখবো। সাথেই থাকুন।
সেকশনঃ ৩
এইচটিএমএল টেবিল।
এইচটিএমএল এর একটু কঠিন অংশ এটি। তাই একটু মনযোগী হতে হবে আমাদের। তবেই আমরা সহজে শিখতে পারবো। টেবিল এর জন্য আমরা একটা না দুইটা না তিনটা ট্যাগ ব্যাবহার করব! একটি টেবিল ট্যাগ এবং এর ভেতরে টেবিল রো ও টেবিল ডাটা ট্যাগ ব্যাবহার করে কলাম ও সারি তৈরী করব।
টেবিলে ব্যাবহৃত ট্যাগ সমূহঃ
<table>, <tr> , <td>
টেবিল ট্যাগের ভেতর <tr>, <td> থাকে। <tr> হলো টেবিল রো বা টেবিল সারি। টেবিল সারির ভেতর <td>টেবিল ডাটা বা টেবিল তথ্য থাকে। নিম্নে আমরা একটি নমুনা দেখি।
- Code:
<html>
<head>
<title> A table </title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td> No </td> <td> Name </td>
</tr>
<tr>
<td> 01 </td> <td> Amin </td>
</tr>
<tr>
<td> 02 </td> <td> Afil </td>
</tr>
<tr>
<td> 03 </td> <td> Hafiz </td>
</tr>
</table>
</body>
</html>
রেজাল্টঃ
 |
| টেবিল |
বিদায় নোট
আজকে অনেক লেখা হলো। টেবিল এক এপিসোডে সম্ভব না তাই আমরা কাল আবার শুধু টেবিল নিয়েই লিখবো। সেই পর্যন্ত সাথে থাকুন।অনেক অনেক ধন্যবাদ আমাদের আর্টিকেল পড়ার জন্যে। বন্ধুদের সাথে ভাগ করুন যদি দলগত ভাবে শিখতে চান। কোন সমস্যায় আমরা তো আছিই।
শুভ বিদায়
কালকে যা যা শিখবোঃ
১ । টেবিল এর কলাম বাড়ানো ও কমানো।
২। কলাম জোড়া ও ভাংগা
৩। টেবিল হেড ও বডি
৪। টেবিল স্টাইলিং
Permissions in this forum:
You cannot reply to topics in this forum|
|
|