by Baharul | Jan 14, 2021 | Web Designing Course |
HTML List – তথ্যাবলী কে ওয়েব পেজে সুন্দর ভাবে তালিকা বা লিস্ট আকারে প্রদর্শন করার জন্য লিস্ট ট্যাগ ব্যবহার করা হয়। নিচে কিছু ফুলের নাম দেখুন, যেগুলো একটি লিস্ট আকারে প্রদর্শিত হয়েছে।
- সূর্যমুখী,
- দোলনচাঁপা,
- হাসনাহেনা,
- কাঠগোলাপ।
সর্বাধিক জনপ্রিয় লিস্ট ২ প্রকার। যথা –
১) অর্ডারড লিস্ট বা নাম্বারড লিস্ট,
২) আনঅর্ডারড লিস্ট বা বুলেটেড লিস্ট,
এছাড়াও আরও এক প্রকার লিস্ট আছে, তা হল –
৩) ডেফিনেশন লিস্ট বা বর্ণনামূলক লিস্ট।
এইচটিএমএল লিস্ট – HTML List :অর্ডারড লিস্ট বা নাম্বারড লিস্ট
তথ্যাবলীকে ক্রমিক নং বা সিরিয়াল নাম্বার অনুসারে উপস্থাপনের জন্য যে পদ্ধতির লিস্ট ব্যবহার করা হয় তাকে অর্ডারড লিস্ট বা নাম্বারড লিস্ট বলে। এটি একটি ব্লক লেভেল এলিমেনট।
অর্ডারড লিস্ট বা নাম্বারড লিস্ট উপস্থাপন করা হয় <ol>…</ol> ট্যাগ দিয়ে এবং প্রতিটি লিস্ট আইটেম উপস্থাপন করা হয়<li>…</li> ট্যাগ দিয়ে যেগুলো <ol> ও </ol> ট্যাগ এর মাঝে অবস্থান করে।
উদাহরণ
<ol>
<li> This is a list. </li>
<li> This is a list. </li>
<li> This is a list. </li>
</ol>
নোট – এখানে ডিফল্ট স্টাইল টাইপ রুপে 1, 2, 3 ইত্যাদি প্রদর্শিত হয়।
অর্ডার লিস্টের বাবহ্রিত চিহ্ন
<ol> ট্যাগের সাথে সিএসএস type এট্রিবিউট ব্যবহার করে লিস্ট আইটেম গুলো চিহ্নিত করার ধরণসমূহ নির্ধারণ করা যায়।
লিস্ট আইটেম গুলো সংখ্যা দিয়ে প্রদর্শন করতে হলে type এট্রিবিউটের মান নির্ধারণ করতে হবে “1”, নিচে একটি উদাহরণ দেখুন।
উদাহরণ
<ol type=”1″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
লিস্ট আইটেম গুলো ছোট হাতের ইংরেজি অক্ষর দিয়ে প্রদর্শন করতে হলে type এট্রিবিউটের মান নির্ধারণ করতে হবে “A”, নিচে একটি উদাহরণ দেখুন।
উদাহরণ
<ol type=”A”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
লিস্ট আইটেম গুলো ছোট হাতের ইংরেজি অক্ষর দিয়ে প্রদর্শন করতে হলে type এট্রিবিউটের মান নির্ধারণ করতে হবে “a”, নিচে একটি উদাহরণ দেখুন।
উদাহরণ
<ol type=”a”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
লিস্ট আইটেম গুলো বড় হাতের রোমান সংখ্যা দিয়ে প্রদর্শন করতে হলে type এট্রিবিউটের মান নির্ধারণ করতে হবে “I”, নিচে একটি উদাহরণ দেখুন।
বড় হাতের রোমান সংখ্যা
<ol type=”I”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
লিস্ট আইটেম গুলো ছোট হাতের রোমান সংখ্যা দিয়ে প্রদর্শন করতে হলে type এট্রিবিউটের মান নির্ধারণ করতে হবে “i”, নিচে একটি উদাহরণ দেখুন।
ছোট হাতের রোমান সংখ্যা
<ol type=”i”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
এইচটিএমএল লিস্ট কি? – What is HTML List : আনঅর্ডারড লিস্ট বা বুলেটেড লিস্ট কাকে বলে?
তথ্যাবলীকে বিভিন্ন সিম্বল বা বুলেট ব্যবহার করে উপস্থাপনের জন্য যে পদ্ধতির লিস্ট তৈরি করা হয় তাকে আনঅর্ডারড লিস্ট বা বুলেটেড লিস্ট বলে। এটি একটি ব্লক লেভেল এলিমেনট।
আনঅর্ডারড লিস্ট বা বুলেটেড লিস্ট উপস্থাপন করা হয় <ul> … </ul> ট্যাগ দিয়ে এবং প্রতিটি লিস্ট আইটেম উপস্থাপন করা হয় <li> … </li> ট্যাগ দিয়ে যেগুলো <ul> ও </ul> ট্যাগ এর মাঝে অবস্থান করে।
উদাহরণ
<ol>
<li> This is a list. </li>
<li> This is a list. </li>
<li> This is a list. </li>
</ol>
নোট – এখানে ডিফল্ট স্টাইল টাইপ রুপে কাল রঙের বৃত্ত প্রদর্শিত হয়।
HTML আন-অর্ডার লিস্টে ব্যবহৃত চিহ্ন
সিএসএস list-style-type প্রোপার্টি ব্যবহার করে আন-অর্ডার লিস্টে বিভিন্ন ধরনের চিহ্ন প্রদর্শন করা যায়।
সিএসএস list-style-type প্রোপার্টি ব্যবহার করে আন-অর্ডার লিস্টের বিভিন্ন মান বা value এর জন্য কিরকম চিহ্ন প্রদর্শিত হবে তা নিছে দেখুন –
circle – এই মানের জন্য লিস্টের আইটেম গুলো চক্র বা circle আকারে প্রদর্শিত হয়।
disc – এই মানের জন্য লিস্টের আইটেম গুলো বুলেট অর্থাৎ বৃত্ত আকারে প্রদর্শিত হয়। এই টা সিএসএস list-style-type প্রোপার্টির default মান।
square – এই মানের জন্য লিস্টের আইটেম গুলো বর্গাকার হয়ে প্রদর্শিত হয়।
none – এই মানের জন্য কোন ছিনহ প্রদর্শিত হয় না।
লিস্ট আইটেম গুলো Disc ছিনহ দিয়ে প্রদর্শন করতে হলে list-style-type এট্রিবিউটের মান নির্ধারণ করতে হবে “disc”, নিচে একটি উদাহরণ দেখুন।
উদাহরণ
<ul style=”list-style-type:disc”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
লিস্ট আইটেম গুলো Circle ছিনহ দিয়ে প্রদর্শন করতে হলে list-style-type এট্রিবিউটের মান নির্ধারণ করতে হবে “circle”, নিচে একটি উদাহরণ দেখুন।
এইচটিএমএল লিস্ট কি?
উদাহরণ
<ul style=”list-style-type:circle”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
লিস্ট আইটেম গুলো Square ছিনহ দিয়ে প্রদর্শন করতে হলে list-style-type এট্রিবিউটের মান নির্ধারণ করতে হবে “square”, নিচে একটি উদাহরণ দেখুন।
উদাহরণ
<ul style=”list-style-type:square”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
লিস্ট আইটেম গুলো যদি কোন ছিনহ ছাড়া প্রদর্শন করতে চান, তবে list-style-type এট্রিবিউটের মান নির্ধারণ করতে হবে “none”, নিচে একটি উদাহরণ দেখুন।
উদাহরণ
<ul style=”list-style-type:none”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ডেফিনেশন লিস্ট বা বর্ণনামূলক লিস্ট – What is HTML List
ডেফিনেশন বা বর্ণনামূলক লিস্ট হল এমন এক প্রকার লিস্ট যার প্রতিটি লিস্ট আইটেম এর সাথে একটি করে সংক্ষিপ্ত বিবরণ বা ডেফিনেশন থাকে। এটি একটি ব্লক লেভেল এলিমেনট।
ওয়েব পেজে ডেফিনেশন লিস্ট বা বর্ণনামূলক লিস্ট উপস্থাপন করা হয় <dl>…</dl> ট্যাগ দিয়ে। প্রতিটি লিস্ট আইটেম উপস্থাপন করা হয়<dt>…</dt> ট্যাগ দিয়ে যেগুলো <dl> ও </dl> ট্যাগ এর মাঝে অবস্থান করে। প্রতিটি লিস্ট আইটেম এর সংক্ষিপ্ত বিবরণ বা ডেফিনেশন ঐ লিস্ট আইটেম টির পরে <dd> ও </dd> ট্যাগ এর মাধ্যমে লেখা হয়।
উদাহরণ
<dl>
<dt>Coffee</dt>
<dd> – black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
নেস্টেড বা Nested লিস্ট
এইচটিএমএল লিস্টের মধ্যে পূনরায় লিস্ট তৈরি করা যায়, মানে কোন একটি লিস্ট আইটেমের জায়গায় আমরা আবার একটি লিস্ট তৈরি করতে পারি। অর্থাৎ কোন লিস্টের ভেতরে আবার লিস্ট তৈরি করতে পারি। নিচে একটি উদাহরণের মাদ্ধমে বিষয়টি দেখুন।
উদাহরণ
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
নোট – কোন এইচটিএমএল লিস্টের মধ্যে যেকোন এইচটিএমএল এলিমেন্ট, যেমন – কোন নতুন লিস্ট, ছবি, প্যারাগ্রাফ, লিংক ইত্যাদি। রাখা যেতে পারে।
আনুভূমিক বা Horizontal লিস্ট
সিএসএস স্টাইল কোড ব্যবহার করে, লিস্ট এলিমেন্তকে বিভিন্ন স্থানে ব্যবহার করা যায়। ওয়েব পেজের মেনুবার তৈরি তার অন্যতম একটি উদাহরণ। লিস্টকে ব্যবহার করে খুব সহজেই কোন আনুভূমিক বা Horizontal এবং উলম্ব বা Vertical মেনুবার তৈরি করা যায়। নিচে একটি উদাহরণ দেখুন, যেখানে সিএসএস ব্যবহার করে একটি মেনু বার তৈরি করা হয়েছে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
ul{list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333333;}
li {float: left;}
li a {display: block;color: white;text-align: center;padding: 16px;text-decoration: none;}
li a:hover {background-color: #111111;}
</style>
</head>
<body>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#news”>News</a></li>
<li><a href=”#contact”>Contact</a></li>
<li><a href=”#about”>About</a></li>
</ul>
</body>
</html>
এইচটিএমএল লিস্ট – HTML List
সিএসএস সম্পর্কে আরও জানতে আমাদের সিএসএস টিউটোরিয়াল দেখুন।
এইচ টি এম এল লিস্ট – H T M L L I S T
by Baharul | Jan 13, 2021 | Web Designing Course |
এইচটিএমএল কমেন্টস (HTML Comments)
কি ভাবে html comment section তৈরী করতে হয়? আমরা যারা Facebook ব্যবহার করি সবারই Comment সম্পর্কে ভাল জানেন। তবে Facebook Comment আর এইচটিএমএল Comment এক জিনিস নয়। Facebook Comment ব্রাউজারে দেখা যায়। কিন্তু এইচটিএমএল কমেন্ট ব্রাউজারে দেখা যায় না। এইচটিএমএল কমেন্ট বলতে মুলত কোড এডিটরের কমেন্টকে বুঝানো হয়। পূর্ণাঙ্গ পেজ বানাতে গিয়ে আমাদেরকে হাজার হাজার লাইন কোড করতে হয়। কোথায় কি বিষয়ে বা কোন্ সেকশনের কোড করা হয়েছে তা সনাক্ত করার জন্য আমরা কিছু কমেন্ট করে রাখি। পরবর্তিতে যখনই কোন বিশেষ একটি সেকশনের কোড সম্পাদন করার প্রয়োজন হয়, তখন আমাদেরকে সেই সেকশনের কোড খুঁজতে গিয়ে বিড়ম্বনায় পড়তে হয় না। অতি সহজে অল্প সময়ে কমেন্ট দেখে আমরা সেই সেকশন খুঁজে নিতে পারি। তাছাড়া অনেক সময় আমাদেকে গ্রুপ করে ওয়েবসাইট বানাতে হয়। কেউ ডিজানের কাজ করলে অন্য কেউ হয়তো ডেভেলপমেন্টের কাজ করে। তখন ডিজাইনার যে কোড করেছে তা ডেভেলপার এই কমেন্টের সাহায্যে কোড গুলোর সেকশন সহজে খুঁজে নিতে পারে। কমেন্ট ব্রাউজারে দেখা যায় না। কমেন্ট শুধুমাত্র ডিজাইনার আর ডেভেলপার এর সুবিধার জন্য করা হয়।
কমেন্ট করার নিয়ম ভিন্ন ভিন্ন ভাষায় ভিন্ন ভিন্ন হতে হতে পারে। এইচটিএলে এক নিয়ম তো সিএসএসে অন্য নিয়ম। নিয়ম যেটাই হোক এটা ছোট্ট একটি সিনট্যাক্স মাত্র। এইচটিএমএল এর কমেন্ট সিনট্যাক্স নিয়ম হচ্ছে শুধু এইটুকু <!– Comments –> এর ভিতরে আপনি যাই লিখেন তার সবই হচ্ছে কমেন্টস। এখানে একটা বিষয় খিয়াল করে দেখুন। এখানে ওপেনিং ট্যাগ এর ভিতরে বিস্ময়বোধক চিহ্ন (!) একাধিক বিয়োগ চিহ্ন এর পরে “আপনার কমেন্টস” এর পরে আবার একাধিক বিয়োগ চিহ্ন। কিন্তু এর কোন ক্লোজিং ট্যাগ নেই। হ্যাঁ, কমেন্টের জন্য ক্লোজিং ট্যাগের প্রয়োজন নেই। তবে কিছু কিছু সময় আমাদেরকে এমন পরিস্থিতির সম্মুখীন হতে হয় যখন আমরা কোন একটা সেকশনের কোড লিখে সম্পূর্ণ করে ফেলি কিন্তু যে কোন কারণে আপাতত সেই কোডের ফলাফল ব্রাউজারে দেখাতে চাই না। পরে হয়তো দেখাতে হবে। এমন পরিস্থিতিতে সম্পূর্ণ কোডকে কমেন্ট করে রাখতে হয়। তো এমন অবস্থায় অনেক লাইনের কমেন্ট কিভাবে করা যায় তার নিয়ম উদাহরণে দেখিয়েছি।
HTML Comments কোড শেখার উপায় উদাহরণ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title> HTML Comments </title>
</head>
<body>
<h2>This Headline Is Out Of Comment.</h2>
<!– This Is a Comment –>
<!–
<h3>This Headline Is Inside Of Comment.</h3>
<section>
<p>
এখানে একটা বিষয় খিয়াল করে দেখুন। এখানে ওপেনিং ট্যাগ এর ভিতরে বিস্ময়বোধক চিহ্ন (!) একাধিক বিয়োগ চিহ্ন এর পরে “আপনার কমেন্টস” এর পরে আবার একাধিক বিয়োগ চিহ্ন। কিন্তু এর কোন ক্লোজিং ট্যাগ নেই। হ্যাঁ, কমেন্টের জন্য ক্লোজিং ট্যাগের প্রয়োজন নেই। তবে কিছু কিছু সময় আমাদেরকে এমন পরিস্থিতির সম্মুখীন হতে হয় যখন আমরা কোন একটা সেকশনের কোড লিখে সম্পূর্ণ করে ফেলি কিন্তু যে কোন কারণে আপাতত সেই কোডের ফলাফল ব্রাউজারে দেখাতে চাই না। পরে হয়তো দেখাতে হবে। এমন পরিস্থিতিতে সম্পূর্ণ কোডকে কমেন্ট করে রাখতে হয়। তো এমন অবস্থায় অনেক লাইনের কমেন্ট কিভাবে করা যায় তার নিয়ম উদাহরণে দেখিয়েছি।
</p>
</section>
–>
<p> ইহা যেহেতু কমেন্টের বাইরে আছে সেহেতু ব্রাউজারে ইহা প্রদর্শিত হবে। </p>
</body>
</html>
ব্রাউজারে রান করলে দেখা যায় এইচটিএমএল কমেন্টস (HTML Comments) কৃত অংশ ব্রাউজারে দেখা যায় না।
HTML Comments
ওয়েব ডিজাইন সম্পূর্ণ জানতে ভিজিট করুন
by Baharul | Jan 11, 2021 | Web Designing Course |
| প্রসঙ্গ |
বর্ণনা |
| form ট্যাগ |
ব্যবহারকারীর তথ্য সংগ্রহ করার জন্য এইচটিএমএল ফর্ম ব্যবহৃত হয় |
| input ট্যাগ |
ফর্মের তথ্য সংগ্রহ করার জন্য বিভিন্ন ইনপুট ট্যাগ ব্যবহার করা হয় |
| action এট্রিবিউট |
ওয়েব পেজ থেকে ফর্মের তথ্য সার্ভারে পাঠায় |
| method এট্রিবিউট |
ফর্ম সাবমিটের জন্য এইচটিটিপি(HTTP) মেথড নির্ধারণ করে |
| name এট্রিবিউট |
ইনপুট ফিল্ডের ভ্যালু সার্ভারে সঠিক ভাবে সাবমিট করে |
| fieldset এট্রিবিউট |
ফর্মের তথ্যকে বিভিন্ন অংশে বিভক্ত করে |
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল ফর্ম উদাহরণ</title>
</head>
<body>
<form method=”post” action=”action_page.php”>
প্রথম নামঃ <input type=”text” name=”firstname” value=”শিল্পী”><br>
শেষের নামঃ <input type=”text” name=”lastname” value=”দেবনাথ”><br>
<input type=”submit” value=”সাবমিট”>
</form>
</body>
</html>
যখন আপনি সাবমিট বাটনে ক্লিক করবেন, তখন সার্ভার আপনার ইনপুট গুলোকে “action_page.php” ফাইলের মাধ্যমে প্রক্রিয়াজাত করে এবং ফলাফল ফেরত দেয়।
ফলাফল
বিঃদ্রঃ এই টিউটোরিয়ালটি আপনাকে শিখাবে না কিভাবে সার্ভার ফাইল প্রক্রিয়া করে। তা শিখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
এইচটিএমএল ফর্ম HTML Form এইচটিএমএল <form> এলিমেন্ট
ব্যবহারকারীর তথ্য সংগ্রহ করার জন্য এইচটিএমএল ফর্ম ব্যবহৃত হয়।
একটি এইচটিএমএল ফর্মকে <form> এলিমেন্ট দিয়ে ডিফাইন করা হয়।
উদাহরণ
<form>
…
ফর্ম এলিমেন্ট
…
</form>
ফর্ম এলিমেন্ট বিভিন্ন ধরনের হয়ে থাকে। যেমনঃ ইনপুট এলিমেন্ট, চেকবক্স, রেডিও বাটন, সাবমিট বাটন ইত্যাদি।
ফর্ম <input> এলিমেন্ট
ফর্ম এলিমেন্টের মধ্যে সবচেয়ে গুরুত্বপূর্ণ এবং বহুল ব্যবহৃত হচ্ছে <input> এলিমেন্ট। আমরা <input> এলিমেন্টে type এট্রিবিউট ব্যবহারের মাধ্যমে <input> এলিমেন্টকে বিভিন্ন প্রয়োজনে ব্যবহার করতে পারি।
এই টিউটোরিয়ালে আমরা type এট্রিবিউটে নিম্নের তিনটি ভ্যালুর ব্যবহার দেখবোঃ
| টাইপ |
বর্ণনা |
| text |
সাধারণ টেক্সট ইনপুট ডিফাইন করে |
| radio |
রেডিও বাটন ইনপুট ডিফাইন করে |
| submit |
ফর্ম সার্ভারে প্রেরনের জন্য ডিফাইন করা হয় |
ফর্ম text টাইপ ইনপুট
এক লাইনের একটি বক্সের মাধ্যমে তথ্য সংগ্রহের জন্য <input type=”text”> ডিফাইন করতে হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>টেক্সট টাইপ ইনপুট</title>
</head>
<body>
<form>
প্রথম নামঃ <input type=”text” name=”firstname”><br>
শেষের নামঃ <input type=”text” name=”lastname”><br>
</form>
</body>
</html>
ফলাফল
পরামর্শঃ টেক্সট ইনপু্টের ডিফল্ট দৈর্ঘ্য ২০ ক্যারেক্টারের বেশি হয় না।
ফর্ম radio টাইপ ইনপুট
ইনপুট এলিমেন্ট দ্বারা রেডিও টাইপ বাটন তৈরি করার জন্য <input type=”radio”> ডিফাইন করতে হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>রেডিও টাইপ ইনপুট</title>
</head>
<body>
<form>
<input type=”radio” name=”company” value=”dell” checked> Dell <br>
<input type=”radio” name=”company” value=”apple”> Apple <br>
<input type=”radio” name=”company” value=”lenovo”> Lenovo
</form>
</body>
</html>
নিম্নের রেডিও বাটনে ব্যবহারকারী যেকোন একটিকে সিলেক্ট করতে পারবেঃ
ফলাফল
এইচটিএমএল ফর্ম HTML Form submit টাইপ ইনপুট
সার্ভারে তথ্য প্রেরনের জন্য সাবমিট বাটন তৈরি করতে <input type=”submit”> ডিফাইন করতে হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সাবমিট টাইপ ইনপুট</title>
</head>
<body>
<form action=”action_page.php”>
প্রথম নামঃ <input type=”text” name=”firstname” value=”শিল্পী”><br>
শেষের নামঃ <input type=”text” name=”lastname” value=”দেবনাথ”><br>
<input type=”submit” value=”সাবমিট”>
</form>
</body>
</html>
যখন আপনি সাবমিট বাটনে ক্লিক করবেন, তখন সার্ভার আপনার ইনপুট গুলোকে “action_page.php” ফাইলের মাধ্যমে প্রক্রিয়াজাত করে এবং ফলাফল ফেরত দেয়।
ফলাফল
বিঃদ্রঃ এই টিউটোরিয়ালটি আপনাকে শিখাবে না কিভাবে সার্ভার ফাইল প্রক্রিয়া করে। তা শিখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
ফর্ম action এট্রিবিউট
সাবমিট বাটনে ক্লিক করার পর action এট্রিবিউটটি তার কার্য সম্পাদন করে। সাবমিট বাটনে ক্লিকের মাধ্যমে ওয়েব পেজ থেকে ফর্মের তথ্য সার্ভারে সাবমিট করা হয়।
নিম্নে একটি ব্যবহার দেখানো হলোঃ
<form action=”action_page.php”>
ফর্ম method এট্রিবিউট
ফর্ম সাবমিটের জন্য এইচটিটিপি(HTTP) মেথড GET অথবা POST ব্যবহার হয়। নিম্নে ফর্মে মেথড এট্রিবিউট ডিফাইন করা হলঃ
<form action=”action_page.php” method=”get”>
অথবাঃ
<form action=”action_page.php” method=”post”>
কখন get ব্যবহার করবো?
ডিফল্টভাবে আপনি get মেথড ব্যবহার করতে পারেন। তবে ফর্মের তথ্য যদি সেন্সিটিভ(ইউজারের নাম অথবা পাসওয়ার্ড) হয় সেক্ষেত্রে get মেথড ব্যবহার করা উচিত না। কারণ আপনি যখন get মেথোড ব্যবহার করে ফর্মের তথ্য সার্ভারে পাঠান সেক্ষেত্রে আপনার প্রেরিত তথ্যটি নিম্নের মত পেজের এড্রেসের সাথে দেখা যাবেঃ
http://action_page.php?firstname=শিল্পী&lastname=দেবনাথ
কখন post ব্যবহার করবো?
আপনার ফর্মের তথ্য যদি সেন্সিটিভ হয় সেক্ষেত্রে অবশ্যই আপনার post মেথড ব্যবহার করা উচিত। কারণ আপনি যখন get মেথোড ব্যবহার করে ফর্মের তথ্য সার্ভারে পাঠান সেক্ষেত্রে আপনার প্রেরিত তথ্যটি নিম্নের মত পেজের এড্রেসের সাথে দেখা যাবে নাঃ
http://action_page.php
ফর্ম name এট্রিবিউট
প্রতিটি ইনপুট ফিল্ডের ভ্যালু সার্ভারে সঠিক ভাবে সাবমিট করার জন্য অবশ্যই name এট্রিবিউটটি সঠিক ভাবে ব্যবহার করতে হবে। কারণ name এট্রিবিউট ব্যাতিত সার্ভার আপনার প্রেরিত তথ্য গ্রহন করতে পারবে না।
নিম্নের উদাহরণে ফর্ম সাবমিট করার পর “প্রথম নাম” ইনপুট ফিল্ডের তথ্য সার্ভার গ্রহন করবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>ফর্ম name এট্রিবিউট</title>
</head>
<body>
<form action=”action_page.php”>
প্রথম নামঃ
<input type=”text” name=”firstname” value=”শরীফ”>
<br>
শেষের নামঃ
<input type=”text” value=”গাজী”>
<br><br>
<input type=”submit” value=”সাবমিট”>
</form>
</body>
</html>
লক্ষ্য করুনঃ “শেষের নাম” এই ইনপুট এলিমেন্টের ভ্যালু সার্ভারে সাবমিট হবে না, কারণ ইনপুট এলিমেন্টে কোনো name এট্রিবিউট নেই।
ফলাফল
বিঃদ্রঃ এই টিউটোরিয়ালটি আপনাকে শিখাবে না কিভাবে সার্ভার ফাইল প্রক্রিয়া করে। তা শিখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
ফর্ম <fieldset> এর মাধ্যমে ফর্মের তথ্য বিন্যাস
ফর্মের তথ্যকে বিভিন্ন ভাগে বিভক্ত করার জন্য <fieldset> এলিমেন্ট ব্যবহার করা হয় এবং <fieldset> এলিমেন্টের মধ্যে <legend> এলিমেন্ট ব্যবহারের মাধ্যমে একটি ক্যাপশন বা শিরোনাম নির্ধারণ করা যায়
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল ফর্ম</title>
</head>
<body>
<form action=”action_page.php”>
<fieldset>
<legend> ব্যক্তিগত তথ্য:</legend>
প্রথম নামঃ
<input type=”text” name=”firstname” value=”শিল্পী”>
<br>
শেষের নামঃ
<input type=”text” name=”lastname” value=”দেবনাথ”>
<br>
<input type=”submit” value=”সাবমিট”>
</fieldset>
</form>
</body>
</html>
ফলাফল
বিঃদ্রঃ এই টিউটোরিয়ালটি আপনাকে শিখাবে না কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে। তা শিখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
এইচটিএমএল ফর্ম এট্রিবিউট
নিম্নে ফর্মের সকল সম্ভাব্য এট্রিবিউটের সেটসহ একটি এইচটিএমএল <form> এলিমেন্ট দেখানো হলোঃ
উদাহরণ
<form action=”action_page.php” method=”post” target=”_blank”
accept-charset=”UTF-8″ enctype=”application/x-www-form-urlencoded”
autocomplete=”off” novalidate>
…
ফর্ম এলিমেন্ট
…
</form>
নিন্মে <form> এলিমেন্টের এট্রিবিউট সমুহের তালিকা দেওয়া হলোঃ
| এট্রিবিউট |
বর্ণনা |
| accept-charset |
ফর্মের জন্য ক্যারেক্টার সেট ডিফাইন করে। |
| action |
ফর্ম কোথায় সাবমিট করা হবে তা ডিফাইন করে। |
| autocomplete |
ব্রাউজার ফর্মের ভ্যালু স্বয়ংক্রিয়ভাবে সম্পূর্ন করবে কিনা তা ডিফাইন করে। |
| enctype |
সাবমিটকৃত ডেটার জন্য এনকোডিং ডিফাইন করা হয়।(ডিফল্টঃ url-encoded) |
| method |
ডেটা সাবমিটের জন্য নির্দিষ্ট এইচটিটিপি(HTTP) মেথড ডিফাইন করা হয়। |
| name
|
ফর্মকে সনাক্ত করতে একটি নাম ব্যবহৃত হয়।(ডোমে ব্যবহারের জন্যঃ document.forms.name) |
| novalidate |
ব্রাউজার ফর্মের বৈধতা যাচাই করবে না তা ডিফাইন করে। |
| target action |
এট্রিবিউটের মাধ্যমে তথ্য প্রক্রিয়া করার জন্য সার্ভার ফাইলটি ডিফাইন করে। |
by Baharul | Jan 9, 2021 | Web Designing Course |
CSS কি? CSS এর কাজ কি?
CSS কি? Cascading Style Sheet এর সংক্ষিপ্ত রূপ হচ্ছে CSS (আমরা CSS কিভাবে কাজ করে? বা তার সি.এস.এস তা বিস্তারিত জানবো)। সহজ ভাষায় ওয়েব পেজের বিভিন্ন উপাদানের গঠন, আকার, আকৃতি, অবস্থান, রং, গতিশীলতা ইত্যাদি নির্ধারণের সহজ কৌশল হচ্ছে CSS । ওয়েব ডিজাইন করতে গেলে Css সম্পর্কে সঠিক ধারনা থাকা জরুরি। CSS কী? CSS এর কাজ কি? Css এমন একটি ভাষা যা এইচটিএমএল ডকুমেন্টের স্টাইল বর্ণনা করে। কারণ HTML হলো ওয়েব পেজের গঠন। ওয়েব পেজকে সুন্দর ও আকর্ষনীয় করার জন্য Css ব্যবহার করা হয়। যেমন একটি বিল্ডিং তৈরি করার পর রং করতে হয় তেমনি ওয়েব পেজ ডিজাইন করার পর বিভিন্ন ডিজাইন দিতে হয়। আর এই ডিজাইন দেওয়ার জন্য ব্যবহার করা হয় Css (cascading style sheets)। সিএসএস বর্ণনা করে যে কীভাবে এইচটিএমএল উপাদানগুলি স্ক্রিন, বা অন্য মিডিয়ায় প্রদর্শিত হবে। Html এবং সিএসএস css সবসময় একসাথে ব্যবহৃত হয়।
কেন CSS ব্যবহার করবো? Web design CSS কেন? এত গুরুপ্ত দিতে হয়। HTML, CSS, JavaScript এবং React সম্পর্কে জানি। এগুলিকে কাজে লাগানোর সহজ উপায় কী?
আসলে সিএসএস ও একটি ল্যাঙ্গুয়েজে Html এর মতোই Html এ অনেকরকমের ট্যাগ ব্যবহার করা হয়, যেমন <h1> header tag ,<p> paragraph tag, <img> image tag এই সমস্ত ট্যাগ গুলিকে আমাদের ব্রাউজারে আরো সুন্দর ভাবে দেখানোর জন্য সি এস এস ব্যবহার করা হয়। সংক্ষেপে, এটি ওয়েবসাইটের এইচটিএমএল উপাদানগুলিকে (Element) নিয়ন্ত্রণ করে।
সিএসএস এর কাজ হলো ওয়েব পেজটিকে আকর্ষিত করা বা ডিজাইন বা Layout তৈরী করা। HTML এবং CSS এই দুটি দিয়েই আপনি পুরো ওয়েবসাইট এর ডিসাইন করতে পারবেন। এক কথায় একটি সুন্দর ওয়েবসাইট ডিসাইন করতে হলে আপনাকে এই CSS Language খুব ভালো করে শিখতে হবে।
CSS এর কাজ কি?
সিএসএস এর সাহায্যে আপনি HTML পেজ এর টেক্সট গুলিকে নতুন নতুন রং দিতে পারবেন। এছাড়াও যেমন কোনো টেক্সট এর ব্যাকগ্রাউন্ড কালার চেঞ্জ করা পুরো ওয়েবপেজ এর কালার চেঞ্জ করতে পারবেন টেক্সট সাইজ বড় ছোট করা ও আকার বদলাতে এবং আপনার ওয়েব পেজ এর কোথায় কি আপনি রাখতে চান কোন জায়গায় সেটি আপনি ফিক্স করতে পারবেন এই সিএসএস এর সাহায্যে।আপনি অ্যানিমেশন তৈরী করতে পারবেন। আপনি যদি একজন ওয়েব ডিসাইনার হতে চান তাহলে আপনাকে সিএসএস খুব ভালোভাবে শিখতেই হবে।
আমি WEB Development এর জন্য PHP শিখতে চাই। এর পরিবর্তে অন্য কিছু কি শেখা ভালো হবে?
CSS এর সুবিধা
সকল ব্রাউজার এ ভাষাটি বুঝতে পারে তাই এটি ব্যবহার করলে ওয়েব পেজটি লোড করতে কোনো জামেলা হয় না। ওয়েব পেজকে খুব সহজেই ব্যবহার কারির কাছে প্রদর্শন করে।
Note: আপনারা W3Schools গিয়ে CSS কী? CSS এর কাজ কি?কোডিং শিখতে পারেন।
by Baharul | Jan 5, 2021 | Web Designing Course |
How To Create HTML Contact Form
HTML Contact Form UI Design. একটি ওয়েব সাইটের জন্য Contact Form খুবই জরুরি। HTML ব্যবহার করে Contact Form UI তৈরি করা যায়। HTML Contact Form তৈরি করার জন্যি HTML এর কিছু ট্যাগ আছে। ট্যাগ গুলো ব্যবহার করে খুব সহজেই HTML Contact Form তৈরি করার যায়। How to create HTML Contact Form নিয়মিত ওয়েব ডিজাইন এন্ড ডেভেলপমেন্ট টিপস পেতে Kazi IT Zone সঙ্গেই থাকুন।
Contact Form UI তৈরি করার জন্য HTML এর যে ট্যাগ গুলো ব্যবহার করা হয় তা নিম্নে দেওয়া হলোঃ
<form></form>, <input></input>, <label></label>, <textarea></textarea>
এই ট্যাগ গুলো ব্যবহার করে সম্পূর্ণ Contact Form UI তৈরি করা যায়।
একটি index.html File তৈরি করে কোড গুলো লিখে নিন
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h3>Contact Form</h3>
<div class=”container”>
<form action=”/action_page.php”>
<label for=”fname”>First Name</label>
<input type=”text” id=”fname” name=”firstname” placeholder=”Your name..”>
<label for=”lname”>Last Name</label>
<input type=”text” id=”lname” name=”lastname” placeholder=”Your last name..”>
<label for=”country”>Country</label>
<select id=”country” name=”country”>
<option value=”australia”>Australia</option>
<option value=”canada”>Canada</option>
<option value=”usa”>USA</option>
</select>
<label for=”subject”>Subject</label>
<textarea id=”subject” name=”subject” placeholder=”Write something..” style=”height:200px”></textarea>
<input type=”submit” value=”Submit”>
</form>
</div>
</body>
</html>
একটি style.css File তৈরি করে কোড গুলো লিখে নিন
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
লেখা শেষ করে File Save করে index.html File টি রান করে দেখে নিন।
এইচ টি এম এল ওয়েব ডিজাইন সম্পর্কে কাজী আইটি জোন এর একাধিক পোস্ট সমূহঃ
এইচটিএমএল পরিচিতি
কি ভাবে ওয়েব পেজে ইমেজ ব্যবহার করবেন?
HTML Class ও ID ব্যবহারের নিয়ম
HTML Contact Form UI Design
by Baharul | Dec 31, 2020 | Web Designing Course |
ওয়েব সাইট তৈরি করার জন্য আনেক উপাদান ব্যবহার করা হয়। ওয়েব পেজটিকে সুন্দর ও আকর্ষনীয় করে তেরার জন্য HTML ট্যাগের ভিতরে Class বা ID ব্যবহার করা হয়। এই Class বা ID টি ধরে CSS দিয়ে সুন্দর সুন্দর ডিজাইন করা হয়। আনের মনে হতে পারে Class বা ID ছাড়াকি উপাদান গুলো ডিজাইন করা যায় না। ট্যাগ গুলোকে ধরে ডিজাইন করা যায় তবে এই নিয়মটি না মানাই ভালো। কারণ হলো আপনার ওয়েব পেজে একটি <p> </p> থাকবে না আনেক গুলো <p> </p> যদি আপনি Class বা ID ব্যবহার না করেন তবে সকল <p> </p> ট্যাগ একই ডিজাইন পাবে। এই সমস্যা দুর করার জন্য Class বা ID ব্যবহার করা উত্তম।
HTML Class ব্যবহারের নিয়মঃ
HTML যেকোন ট্যাগ এর ভিতর Class ব্যবহার করা যায়। Class ব্যবহারের জন্য প্রথমে HTML ট্যাগ টি লিখতে হবে তার পর HTML শুরুর ট্যাগ এর ভিতরে Class লিখে Class Name দিতে হবে।
যেমনঃ
<p class=”demo”> this is paragraph </p>
এখানে <p> </p> এ Class ব্যবহার করা হয়েছে যার নাম “demo” এই Class টিকে ডিজাইন করার জন্য নিম্নে নিয়মটি দেখেন
. দিয়ে Class name টি দিতে হবে।
যেমনঃ
.demo {
Background-color: #000;
}
HTML ID ব্যবহারের নিয়মঃ
HTML যেকোন ট্যাগ এর ভিতর id ব্যবহার করা যায়। id ব্যবহারের জন্য প্রথমে HTML ট্যাগ টি লিখতে হবে তার পর HTML শুরুর ট্যাগ এর ভিতরে id লিখে Class Name দিতে হবে।
যেমনঃ
<p id=”demo”> this is paragraph </p>
এখানে <p> </p> এ id ব্যবহার করা হয়েছে যার নাম “demo” এই id টিকে ডিজাইন করার জন্য নিম্নে নিয়মটি দেখেন
দিয়ে id name টি দিতে হবে।
যেমনঃ
#demo {
Background-color: #000;
}
