গতকাল যে ক্লাসটি (class 2) হয়েছে তার একটি রিভিউ থাকবে এই আর্টিকেল বা লেখাটিতে।
Class recording 👉👉👉 here
1. Image
2. Video
3. Audio
4. Iframe
5. Ui, Oi, Li
6. Table
7. Form
চলুন তাহলে এগুলো নিয়ে আলোচনা করা যাক।
1. Image
এই বিষয়টি নিয়ে দুটি ক্লাসেই আলোচনা করা হয়েছে তাই আমি মনে করি আপনাদের আর কনফিউশান থাকার কথা না। তারপরেও দেখুন
আমরা যদি ওয়েবসাইটে ছবি আনতে চাই বা শো করাতে চাই তাহলে আমাদের এই image tag টি ব্যবহার করতে হবে।
Image বা ছবি আনার জন্য আমাদের এই ট্যাগটি ব্যবহার করতে হবে <img src=” ” alt=” ” />
চলুন একটু ভেঙ্গে বলি
img একটি single tag বা self closing tag একটু পরে আরো বিস্তারিত জানতে পারবেন।
<img src=” ” alt=” “/ >
এই ট্যাগের ভিতরে দেখুন src নামে কিছু একটা আছে এটা হচ্ছে attribute
এখানে আমাদের বলে দিতে হবে আমাদের ছবিটি কোথায় আছে, এরপর দেখুন alt, এটার ভিতরে কিছু একটা আপনি লিখে দিতে পারেন, লিখলে কি হবে?
লিখলে..যখন কোনো কারনে ছবিটি লোড হবে না বা নেট সমস্যা করে ছবিটি ভালোভাবে আসবে না, তখন এই লেখাটি দেখাবে যেটি আপনি লিখে দিয়েছেন। আশা করি বুঝতে পেরেছেন।
2.Video
ভিডিও এই ট্যাগটি দেখেই আমরা বুঝতে পারছি এইটার সাথে ভিডিওর কিছু একটা সম্পর্ক রয়েছে।
আসলেই তাই, আমরা যদি ওয়েবসাইটে কোনো ভিডিও আনতে চাই, তাহলে আমরা এই video ট্যাগটি দিয়ে আনতে পারি।
ট্যাগটি দেখতে এমন
<video src=” ” type=” ” ></video>
এবং
<video autoplay control loop muted>
<source src=” ” type=” “></source >
</video >
এখন যদি খেয়াল করেন দ্বিতীয় পদ্ধতিতে কিছু attribute দেখতে পাচ্ছেন। এটা প্রথমটার জন্যও দিতে হবে। এগুলো কি আসলে এবং কি কাজ করে?
Autoplay, control, loop, muted etc
* autoplay এটা যখন ব্যবহার করবো তখন অটোমেটিক ভিডিও চালু হয়ে যাবে।
* control এটা যখন ব্যবহার করবো তখন ভিডিও টা কন্টোল করার জন্য একটা কন্টোল বার আসবে।
*loop এটা ব্যবহার করলে ভিডিও টি শেষ হলে আবার চলবে, এইভাবে লুপ করতে থাকবে
*muted এটা ব্যবহার করলে, ভিডিওতে সাউন্ড থাকবে না মিউট হয়ে যাবে
চাইলে আপনি height, width এগুলোও ব্যবহার করতে পারবেন ।
আরেকটি কথা ভিডিওতে type ব্যবহার করবেন video/mp4
আশা করি বুঝতে পেরেছেন
3. Audio
অডিও এটি আর কষ্ট করে লিখবো না। একটি কথাতেই বুঝে যাবেন। ভিডিও এবং অডিও শো করানোর জন্য আলাদা কোনো পদ্ধতি নেই। শুধু ভিডিওর জায়গায় অডিও লিখে দিবেন। <audio></audio>
এইটুকুই পার্থক্য, আর type এ দিবেন audio/mp3 আর কিছুই না
এরপরেও যদি আপনার এটি নিয়ে কনফিউশান থাকে তাহলে খালিদ ভাইয়ের ক্লাসটি আবার দেখতে পারেন
আর না হয় নিচের ভিডিওটি দেখতে পারেন
4. Iframe
Iframe এটি হচ্ছে মজার একটি ট্যাগ বলতে পারেন। কেমন?
আপনি চাচ্ছেন অন্যকারো ওয়েবসাইট আপনার ওয়েবসাইটে দেখাতে বা শো করাতে, তখন আপনি চাইলে এই iframe এর মাধ্যমে দেখাতে পারবেন।
iframe দেখতে এমন হয়
<iframe src=” ” width=” ” height=” “></iframe>
এখানে src এর ভিতরে আপনি যে ওয়েবসাইটের লিংক দিবেন সেই ওয়েবসাইট আপনার ওয়েবসাইটে দেখাবে।
আপনি যদি চান ইউটিউবের ভিডিও ওয়েবসাইটে দেখাতে তাহলে সেটাও পারবেন। কিভাবে?
ইউটিউবে যাবেন একটি ভিডিওতে ডুকবেন শেয়ার অপশনে ক্লিক করবেন দেখতে পাবেন embed কোড লেখা সেই কোডটুকু কপি করে আপনি নিয়ে আসবেন, যেখানে শো করাতে চান সেখানে কোড গুলো দিলেই হয়ে যাবে।
আবার যদি চান গুগল ম্যাপ দেখাতে তাহলে সেটাও পারবেন।
Google Map এ যাবেন একটি আপনি যে জায়গা দেখাতে চাচ্ছেন সেটি বড় করবেন এরপর শেয়ার অপশনে ক্লিক করবেন দেখতে পাবেন embed কোড লেখা সেই কোডটুকু কপি করে আপনি নিয়ে আসবেন, যেখানে শো করাতে চান সেখানে কোড গুলো দিলেই হয়ে যাবে।
আশা করি বুঝতে পেরেরছেন
চাইলে এই ভিডিওটি দেখতে পারেন
5. Ul, Ol, Li
চলেন এবার দেখি ul ol, এবং li
UL হচ্ছে Unorder List
OL হচ্ছে Order List
Li হচ্ছে List Item
আমরা তো লিষ্ট বানাতে চাই কোনো কিছুর তাই না সেটা হোক বাজারের লিষ্ট, কাজের লিষ্ট যাই হোক, এখন কথা হচ্ছে আমরা যদি কোড দিয়ে এই লিষ্ট বানাতে যাই তাহলে আমরা কিভাবে করবো?
আমরা দুইটি মাধ্যম ব্যবহার করে লিষ্ট বানাতে পারি ul এবং ol
চলেন দেখি ul এর কাহিনী
ul দিয়ে লিষ্ট বানালে দেখতে এমন হবে
<ul>
<li>আলু<li>
<li>পিয়াজ</li>
<li>মরিচ</li>
</ul>
এই ভাবে
ol এর কাহিনী একই
<ol>
<li>আলু</li>
<li>পিয়াজ</li>
<li>মরিচ<li>
<li>রসুন<li>
</ol>
আপনি বলতে পারেন তাহলে দুইটা তো একই রকম পার্থক্য কি?
ol এ আপনি দেখতে পাবেন 1 2 3 এই ভাবে সিরিয়ালটা শুরু হয়েছে, আর ul এ ডট ডট দিয়ে শুরু হয়েছে।
ol এ আপনি চাইলে type পরিবর্তন করতে পারবে 1 2 3 এর জায়গায় A B C দিতে পারবেন।
কিন্তুু এগুলো ul এ পারবেন না।
ul এ type দিয়ে আপনি ডট এর পরিবর্তে সার্কেল, বক্স দিতে পারবেন, এই তো আর কিছুই না,
আপনি আরো কিছু শিখতে নিছের ভিডিও টা দেখতে পারেন
6. Table
গত ক্লাসে table নিয়ে আলোচনা করা হয়েছে। টেবিল এটি আমাদের নানান কাজে ব্যবহার করা লাগতে পারে, যেমন আমরা যদি কোনো রেজাল্ট শিট বানাতে চাই তাহলে আমরা টেবিল ব্যবহার করি, কোম্পানির কর্মীর তালিকা তৈরি করতে পারি আরো অনেক কিছু,
তো চলে দেখি আসলে কিভাবে টেবিল বানাতে হয়
টেবিল বানানোর জন্য table নামে একটি ট্যাগ নিতে হয় দেখতে এমন হয় <table></table>
এই দুইটি ট্যাগের ভিতরে টেবিলের নাড়িভুড়ি থাকে মানে সব কিছু 
দেখতে অনেক টা এমন
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
টেবিল টা যদি নাও বুঝেন আমি বুঝিয়ে দিচ্ছি, table ট্যাগ এটা আপনাকে দিতেই হবে
এরপর table এর ভিতরে দেখুন tr নামে একটা জিনিস আছে, এটার মানে হচ্ছে table row এটা আপনাকে দিতে হবে। tr এর ভিতরে রয়েছে th এটার মানে হচ্ছে table head। এটা আপনাকে টেবিলের হেড লেখার জন্য দিতে হবে। এরপরের tr এর ভিতরে দেখতে পাচ্ছি td এটার মানে হচ্ছে table data , এটি দিয়ে আপনি তথ্য দিবেন আপনি টেবিলে।
এখন যদি আউটপুট দেখেন আপনি টেবিল দেখতে পাবেন না, তার জন্য টেবিল ট্যাগে border=”1″ এটা দিতে হবে তাহলে টেবিল দেখাবে।
আশা করি বুঝতে পেরেছেন
এরপরেও যদি না বুঝেন ভিডিওটি দেখতে পারেন
ভিডিও ১
ভিডিও ২
চলুন তাহলে পরের ধাপে যাই
7. Form
Form, আমাদের ওয়েব ডিজাইন এই সেক্টরে এটা লাগবেই। এটা শিখতে হবে অবশ্যই।
আমরা তো ফেসবুকে ডুকার সময় লগইন করি বা একাউন্ট করি, যদি আমরা এমন কিছু একটা বানাতে পারি যেখানে আমরা চাইলে এমন নাম, ঠিকানা, ইমেইল, পাসওয়ার্ড এগুলোর মত জিনিস পত্র বানাতে পারি তাই না? হ্যা অবশ্যই পারি।
আমরা যদি একটি ফর্ম বানাতে চাই তাহলে প্রথমে আমাদের form এই ট্যাগটি নিতে হবে। এই ট্যাগের ভিতরে আমাদের ফর্মের সকল মসলা পাতি মানে সব কিছু থাকবে।
আমরা যদি কারো কাছে থেকে কোনো তথ্য নিতে চাই তাহলে আমাদের এমন একটি ব্যবস্থা করতে হবে, যেখানে মানুষ তার তথ্যগুলো দিবে। সেটা বানানোর জন্য দরকার একটা বক্স যেখানে মানুষ কিছু লিখতে পারবে, তা আনার জন্য আমাদের এই ট্যাগটি ব্যবহার করতে হবে input
input নামের এই ট্যাগটি আমাদের ব্যবহার করতে হবে যদি আমরা কারো কাছে থেকে কিছু ইনপুট নিতে চাই।
যদি আমরা <input/> এই ট্যাগটি ব্যবহার করি তাহলে আমরা একটি বক্স পাবো যেখানে মানুষ কিছু লিখতে পারবে।
এবারের ট্যাগটি একটু দেখুন
<inpute type =”text” placeholder=”Fast Name “/>
এখানে inpute এর ভিতরে একটি type নামের attribute দেখতে পাচ্ছি এটা আসলে কি?
ঐখানে দেখেন type এ text দেওয়া আছে এর মানে হচ্ছে ঐ বক্সে আমরা text বা লেখা নিবো,
এমন কিছু type আছে
email – এটা কাজ হলো এই বক্সে email নিবে
password – এটা কাজ হলো এই বক্সে password নিবে
number – এটা কাজ হলো এই বক্সে number নিবে
date – এটা কাজ হলো এই বক্সে date নিবে
file – এটা কাজ হলো এই বক্সে file নিবে
নিচের লিষ্টগুলো দেখলে বুঝে যাবেন আসলে কোনটা কি। সব গুলো দিয়ে চেক করে দেখতে পারেন।
• <input type=”button”>
• <input type=”checkbox”>
• <input type=”color”>
• <input type=”date”>
• <input type=”datetime-local”>
• <input type=”email”>
• <input type=”file”>
• <input type=”hidden”>
• <input type=”image”>
• <input type=”month”>
• <input type=”number”>
• <input type=”password”>
• <input type=”radio”>
• <input type=”range”>
• <input type=”reset”>
• <input type=”search”>
• <input type=”submit”>
• <input type=”tel”>
• <input type=”text”>
• <input type=”time”>
• <input type=”url”>
• <input type=”week”>
এরপর আরেকটি জিনিস খেয়াল করেছেন হয় তো placeholder নামে একটি জিনিস এটির কাজ হলো
আমরা ফর্ম পূরন করতে গেলে দেখি যে ভিতরে ধূসর টাইপের একটা লেখা থাকে যেমন enter yout first name এমন কিছু। যখন কিছু লিখতে যাই ঐটা চলে যায়। আবার লেখা কেটে দিলে সেটা চলে আসে। এটা placeholder দিয়ে করে থাকে।
আরো বিস্তারিত জানতে খালিদ ভাইয়ের গত ক্লাসটি দেখতে পারেন।
অথবা গুগল থেকে আরো জেনে নিতে পারেন
যদি তাও না পারেন এই নিচের দুটি ভিডিও দেখেন সব ক্লিয়ার হয়ে যাবে
আশা করি আপনারা সব ক্লিয়ার হয়ে যাবেন
মনযোগ দিয়ে ক্লাস করলে সাথে ক্লাস রিভিউ টা পড়লে আপনাদের কোনো কনফিউশান থাকবে না আশা করছি।
এইখানেই শেষ করছি ভালো থাকুন সুস্থ থাকুন
Written by: মোঃ জসীম হোসাইন
Happy Programing 🥰🥰
0 Comments