Tag Archives: উপাদান

HTML5 এর নতুন উপাদান (HTML5 New Elements)

Huge Sell on Popular Electronics

মাসুদ

 

HTML5 New Elements গুলো এবং এদের কাজগুলো নিম্নে দেয়া হল

<article> একটা ডকুমেন্ট এর মধ্যে আর্টিকেল বোঝাতে এই Element ব্যবহৃত হয়।
<aside> কোন কন্টেন্ট যদি পেজ কন্টেন্ট এর থেকে আলাদা হয় তাহলে তা এই Element দ্বারা বোঝানো হয়।
<bdi> কতগুলো বর্নের মধ্যে যদি নির্দিষ্ট কতগুলো বর্ন আলাদা ফরমেটে হয় তাহলে এই Element দ্বারা বোঝানো হয়।
<details> এর দ্বারা অতিরিক্ত বিবরন ব্যবহারকারী আড়াল করে রাখতে পারে।
<dialog> কোন ডায়লগ বক্স নির্দেশ করে।
<figcaption> <figure> element এর caption নির্দেশ করে।
<footer> কোন ডকুমেন্ট এর footer নির্দেশ করে।
<header> কোন ডকুমেন্ট এর header নির্দেশ করে।
<main> এর দ্বারা কোন ডকুমেন্ট এর প্রধান কন্টেন্ট নির্দেশ করা হয়।
<mark> এর দ্বারা কোন ডকুমেন্ট এর সিলেক্ট করা বর্ন বোঝানো হয়।
<menuitem> এর দ্বারা কোন পপ-আপ মেনু থেকে যে কোন কমান্ড সিলেক্ট করতে পারে।
<meter> এর দ্বারা কোন ডকুমেন্ট এর কোন নির্দিষ্ট রেঞ্জ এর পরিমাপ বোঝানো হয়।
<nav> এর দ্বারা কোন ডকুমেন্ট এর নেভিগেশন লিঙ্কস গুলো বোঝানো হয়।
<progress> এর দ্বারা কোন ডকুমেন্ট কার্যপ্রক্রিয়া প্রকাশ করা হয়।
<section> কোন একটি ডকুমেন্ট এর নির্ধারিত সেকশন প্রকাশ করে।
<summary> এর দ্বারা <details> element এর বিস্তারিত অংশ দেখা যায়।
<time> সময় ও তারিখ নির্দেশ করে।
<wbr> সম্ভাব্য লাইন বিরতি প্রকাশ করে।

এইচটিএমএল ফরম উপাদানসমূহ (HTML Form Elements)

Huge Sell on Popular Electronics

শরিফুল ইসলাম
Job category-Php Coder

<input>Element:

ফর্ম element এর মধ্যে সবচেয়ে গুরুত্বপূর্ণ element হল <input> element. এই element টি বিভিন্ন বিষয়ের উপর ভিক্তি করে বিভিন্ন রকম হয়ে থাকে।

<select> Element (drop-down-list):

উদাহরনঃ


 <select name="cars">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="fiat">Fiat</option>
 <option value="audi">Audi</option>
 </select>

 

 

ফলাফল



 

<option> element পছন্দ মতন কনটেন্ট সিলেক্ট অপশন থেকে নির্বাচন করার জন্য ব্যবহার করা হয়। তালিকাতে সাধারনত প্রথম অপশন টি সিলেক্ট করা থাকে।

উদাহরণ


<option value="fiat" selected>Fiat</option>


 

 

ফলাফল



 

<textarea> Element

ইনপুট ফিল্ডের অনেকগুলো লাইন লিখার ক্ষেত্রে আমরা <textarea> ব্যবহার করে থাকি।

উদাহরণ


<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>


 

 

ফলাফল



 

<button> element

কোন বাটন কে ক্লিক করার জন্য আমরা এই element টি ব্যবহার করে থাকি।

উদাহরণ


<button type="button" onclick="alert('Hello World!')">Click Me!</button>


 

 

ফলাফল



 

এইচটিএমএল ৫ <datalist> element

Pre-defined অপশন্‌স এর তালিকা থেকে ইনপুট এর উপাদান এর জন্য দাতালিস্ত ব্যবহার করা হয়। ইউজার রা pre-defined অপশন্‌স এর একটি তালিকা দেখতে পাবে ডাটা ইনপুট দেওয়ার জন্য। এই জন্য <datalist> element এর ভিতর ID attribute নিশ্চিতভাবে ডিফাইন করে দিতে হবে।

উদাহরণ


<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>
</form>

 

ফলাফল





 

এইচটিএমএল ৫ <keygen> element

ইউজার রা নিরাপদ ভাবে বৈধতা ঘোষণা করার জন্য এই element ব্যবহার করা হয় । এই element এর মাধ্যমে একজোড়া ফিল্ড তৈরি হয় ফর্ম এর মধ্যে। যখন ফর্ম সাবমিট করা হয় দুই ধরনের key তৈরি হয়। একটি প্রাইভেট এবং পাবলিক। প্রাইভেট key লোকাল ভাবে জমা হয় এবং পাবলিক key সার্ভার এ পাঠানো হয়। client কে certify করার ক্ষেত্রে এই প্রাইভেট key ব্যবহার করা হয় যাতে ভবিষ্যতে এই ইউজার কে অথিনটিকেত করা যায়।

উদাহরণ


<form action="action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
form>


 

 

ফলাফল


Username:Encryption:


 

এইচটিএমএল ৫ <output> element

কোন ক্যালকুলাসন করার জন্য এবং তার ফলাফল দেখানোর জন্য এই element ব্যবহার করা হয়

উদাহরণ


<form action="action_page.asp"
 oninput="x.value=parseInt(a.value)+parseInt(b.value)">
 0
 <input type="range"  id="a" name="a" value="50">
 100 +
 <input type="number" id="b" name="b" value="50">
 =
 <output name="x" for="a b"></output>
 <br><br>
 <input type="submit">
 </form>

 

 

ফলাফল


0

100 +

=


 

এইচটিএমএল ফর্ম elements

ট্যাগ বর্ণনা
<form> ইউজার দের ইনপুট দেওয়ার জন্য ফর্ম
<input> ইনপুট কে নিয়ন্ত্রণ করার জন্য
<textarea> একের অধিক লাইন কে ইনপুট দেওয়ার জন্য
<lable> একটি ইনপুট এর লেবেল ডিফাইন করার জন্য
<fieldset> একটি ফর্মের মধ্যে গ্রুপ সম্পর্কিত উপাদান ডিফাইন করার জন্য
<legend> <fieldset> element এর নাম দেওয়ার জন্য (caption)
<select> ড্রপ ডাউন তালিকা ডিফাইন করার জন্য
<optgroup> গ্রুপ সম্পর্কিত অপশন ড্রপ ডাউন তালিকা থেকে পাওয়ার জন্য
<option> ড্রপ ডাউন লিস্ট থেকে অপশন সিলেক্ট করার জন্য
<button> বাটন কে ক্লিক করার ক্ষেত্রে
<datalist> pre-defined অপশন্‌স এর একটি তালিকা যা থেকে ইনপুট কে নিয়ন্ত্রণ করা যাবে।
<keygen> ফর্মের একজোড়া key ফিল্ড তৈরি করার জন্য
<optput> calculation এর ফলাফল পাওয়ার জন্য।

 

এইচটিএমএল কম্পিউটার কোডের উপাদান (HTML Computer Code Elements)

Huge Sell on Popular Electronics

HTML Computer Code Elements

AbuJubair Mahin

Computer Code

var person = {
     firstName:"John",
     lastName:"Doe",
     age:50,
     eyeColor:"blue"
}

এইচটি এম এল কম্পিউটার কোডের উপাদান (HTML Computer Code Elements)

সাধারণত, এইচটিএমএল পরিবর্তনশীল letter size, এবং পরিবর্তনশীল letter spacing ব্যবহার করে।

কম্পিউটার কোড এর উদাহরণ প্রদর্শনের সময় এটি ঘটা আশানুরূপ নয় ।

সকল <kbd>, <samp>, and <code> উপাদানগুলো স্থায়ী letter size এবং spacing সাপোর্ট করে ।

 

HTML Keyboard Formatting

এইচটিএমএল <kbd> উপাদান কীবোর্ড ইনপুট কে সংজ্ঞায়িত করে:

উদাহরনঃ


<p>To open a file, select:</p>

<p><kbd>File | Open...</kbd></p>


 

ফলাফলঃ


To open a file, select:

File | Open...


 

HTML Sample Formatting

এইচটিএমএল <samp> উপাদান কম্পিউটার আউটপুট কে সংজ্ঞায়িত করে:

উদাহরনঃ


<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>


 

ফলাফলঃ


demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189


 

HTML Code Formatting

এইচটিএমএল <code> উপাদান প্রোগ্রামিং কোড কে সংজ্ঞায়িত করে:

উদাহরনঃ


<code>
var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
</code>


 

ফলাফলঃ


var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}


 

<code> উপাদান অতিরিক্ত হোয়াইটস্পেস এবং লাইন ব্রেক সংরক্ষণ করে না:

উদাহরনঃ


<p>Coding Example:</p>

<code>
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}
</code>

 


 

ফলাফলঃ


Coding Example:


var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
}


 

এই সমস্যা সমাধানের জন্য, কোডগুলোকে <pre> এলিমেন্টে এর ভিতরে রাখতে হবে:

উদাহরনঃ


<p>Coding Example:</p>

<code>
<pre>
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>

 

ফলাফলঃ


Coding Example:

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}

 

HTML Variable Formatting

এইচটিএমএল <var> উপাদান গাণিতিক ভেরিয়েবলকে সংজ্ঞায়িত করে:

উদাহরনঃ


<p>Einstein wrote:</p>

<p><var>E = m c<sup>2</sup></var></p>


 

ফলাফলঃ


Einstein wrote:

E = m c2


 

এইচটিএমএল Computer Code এলিমেন্টস

Tag বিবরণ
<code> প্রোগ্রামিং কোড কে সংজ্ঞায়িত করে
<kbd> কীবোর্ড ইনপুট কে সংজ্ঞায়িত করে
<samp> কম্পিউটার আউটপুট কে সংজ্ঞায়িত করে
<var> গাণিতিক ভেরিয়েবল কে সংজ্ঞায়িত করে
<pre> পূর্ববিন্যাসিত টেক্সট কে সংজ্ঞায়িত করে

 

লেকচার ৪২: মাইক্রোসফট ওয়ার্ড 2010 – টেবিল এর উপাদানসমূহ বাছাই (Word 2010 – Table sorting)

Huge Sell on Popular Electronics

লেকচার ৩৫: মাইক্রোসফট ওয়ার্ড 2010 – টেবিলে উপাদান যোগ করা (Word 2010 – Add Table Content)

Huge Sell on Popular Electronics

লেকচার ০২: কেমিক্যাল ইঞ্জিনিয়ারিং পরিচিতি – উপাদান ব্যালান্স (Material Balance)

Huge Sell on Popular Electronics