Tag Archives: টেক্সট

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

-মাসুদ-

আজকে আমরা জানবো এইচটিএমএল ইনপুট সম্পর্কে।

টেক্সট ইনপুট

সাধারন তথ্য গ্রহণ করতে টেক্সট ইনপুট ব্যবহৃত হয়। এধরনের ইনপুট এক লাইনের হয়ে থাকে।

 <form>
 First name:<br>
 <input type="text" name="firstname">
 <br>
 Last name:<br>
 <input type="text" name="lastname">
 </form>

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

পাসওয়ার্ড ইনপুট

পাসওয়ার্ড গ্রহণের জন্য এ ধরনের ইনপুট ফিল্ড ব্যবহৃত হয়।

<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

পাসওয়ার্ড এর ঘরটিতে কোনকিছু লিখলে তা মাস্কিং হয়ে থাকবে অর্থ্যাত লেখাগুলো দেখা যাবেনা।

সাবমিট বাটন

ফরম পূরণ শেষে ফরম সাবমিট করতে সাবমিট বাটন ব্যবহৃত হয়।

যেমনঃ

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Masud">
<br>
Last name:<br>
<input type="text" name="lastname" value="Rana">
<br><br>
<input type="submit" value="Submit">
</form>

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

চেকবক্স

চেকবক্স ব্যবহৃত হয় যখন একের অধিক অপশন বাছাই করতে বলা হয়।

<form>
 <input type="checkbox" name="vehicle" value="Bike">I have a cycle
 <br>
 <input type="checkbox" name="vehicle" value="Car">I have a motorcycle
 </form>

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

রেডিও বাটন

রেডিও বাটন ব্যবহৃত হয় যখন একের অধিক অপশন থেকে একটি অপশন বাছাই করতে বলা হয়।লিঙ্গ নির্বাচন করতে রেডিও বাটন ব্যবহৃত হয়। যেমনঃ

 <form>
 <input type="radio" name="sex" value="male" checked>Male
 <br>
 <input type="radio" name="sex" value="female">Female
 </form>

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

jQuery-001 । জে কুয়েরি - ০০১

জেকোয়েরি ইফেক্টস ব্যবহার করে টেক্সট হাইড এবং শো করা

March 31, 2015 Author-Check- Article-or-Video Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

লেখকঃ মোস্তাফিজুর ফিরোজ

কেমন আছেন সবাই ? নিশ্চয়ই ভালো । ভালো না থাকলেও আজ আপনাদের যেটা শিখাবো তাতে এমনিই মন ভালো হয়ে যাবে । আজ আমি আপনাদের জেকোয়েরি ইফেক্টস ব্যবহার করে টেক্সট হাইড এবং শো করা শিখাবো ।

তাহলে আগে চলুন এখান থেকে দুইটি উদাহরণ দেখে আসি ।

উদাহরণ ১ঃ jQuery hide()

একটি সহজ jQuery hide() মেথড প্রদর্শন করে

উদাহরণ ২ঃ jQuery hide()

আরেকটি সহজ jQuery hide() মেথড প্রদর্শন করে। কিভাবে টেক্সট এর কিছু অংশ লুকায়।

jQuery hide() এবং show() ট্যাগের ব্যবহার

jQuery তে hide() and show() মেথড ব্যবহার করে এইচটিএমএল এলিমেন্ট লুকাতে এবং প্রদর্শন করতে পারি:

$("#hide").click(function(){
    $("p").hide();
});

$("#show").click(function(){
    $("p").show();
});

ফলাফল : Hide এবং Show

Syntax

এটাতে কিন্তু আমরা কিছু Syntax যোগ করে স্পিড বাড়াতে কমাতে পারি । তাহলে দেখুন Syntax গুলো কেমন ।

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

এই অপশনাল প্যারামিটার গুলো নির্দেশ করে দেখাতে এবং বন্ধ করতে কেমন সময় নিবে। এর মান "slow", "fast", বা milliseconds হতে পারে।

উদাহরণ:

$("button").click(function(){
    $("p").hide(1000);
});

ফলাফল : স্পিড নিয়ন্ত্রণ

jQuery toggle() মেথড এর ব্যবহার

jQuery toggle() মেথডটি আপনি hide() এবং show() মেথডের মাঝে ব্যবহার করতে পারেন। তাহলে বন্ধ তথ্যগুলো দেখাবে, আর দেখানোগুলো বন্ধ করবে ।

$("button").click(function(){
    $("p").toggle();
});

ফলাফল : Toggle

Syntax

এখানেও আমরা একটা স্পিড Syntax যোগ করে এর স্পীড নিয়ন্ত্রণ করতে পারি ।

$(selector).toggle(speed,callback);

এই স্পীড প্যারামিটার এটিকে দ্রুত, আস্তে এবং মিলিসেকেন্ডে পরিবর্তন করতে পারে ।

কোথাও না বুঝতে পারলে কমেন্ট করুন।

এইচটিএমএল HTML

এইচটিএমএল এর টেক্সট ফরমেটিং (HTML Text Formatting Elements)

March 20, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

HTML Text Formatting Elements

শরিফুল ইসলাম
Job category-Php Coder
Email-bappiislam1988@gmail.com
Mob-01722806467

এইচটিএমএল ফরম্যাটিং elements (HTML Formatting Element)

গত অধ্যায়ে আপনারা জেনেছেন, HTML Style Attribute দ্বারা কিভাবে HTML Style কে পরিবর্তন করা যায়।

এ অধ্যায়ে আমরা HTML Formatting Element সম্পর্কে জানব। নিম্নে HTML Text Formatting Elements গুলোকে উদাহরণসহ তুলে ধরা হল-

এইচটিএমএল এর কিছু গুরুত্তপূর্ণ উপাদান আছে যা দিয়ে টেক্সট কে বিভিন্নরুপে সাজানো যায়।

যেমন আমরা বোল্ড এবং ইতালিক টেক্সট পাওয়ার জন্য ব্যবহার করব <b> এবং <i>। ফরম্যাটিং উপাদান দ্বারা কি ধরনের টেক্সট হতে পারে তা নিচে দেওয়া হল

Bold text
Important text
Italic text
Emphasized text
Marked text
Small text
Deleted text
Inserted text
Subscripts
Superscripts

এইচটিএমএল Bold এবং strong ফরম্যাট এর উদাহরণ

<b> এলিমেন্ট Text কে বোল্ড করে, Text কে কোন বিশেষ গুরুত্ব প্রদান করে না।

উদাহরণঃ

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

</body>
</html>

ফলাফলঃ

This text is normal.

This text is bold.

এইচটিএমএল এর <strong> এলিমেন্ট strong টেক্সট ডিফাইন করে যা শব্দ বা বাক্যটিকে বিশেষ গুরুত্ব প্রদান করে।

উদাহরণঃ

<p><strong>This text is strong</strong>.</p>

ফলাফলঃ

This text is strong.

এইচটিএমএল italic এবং emphasized ফরম্যাট

এইচটিএমএল এ <i> উপাদান দিয়ে ইতালিক টেক্সট ডিসপ্লে করা হয় কোন অতিরিক্ত গুরুত্ত প্রদান করা ব্যতীত।

উদাহরণঃ

<p><i>This text is italic</i>.</p>

ফলাফলঃ

This text is italic.

গুরুত্ব সহকারে emphasized টেক্সট দেখানোর জন্য <em> উপাদান ব্যবহার করা হয়

উদাহরণঃ

<p><em>This text is emphasized</em>.</p>

ফলাফলঃ

This text is emphasized.

দ্রষ্টব্য: ব্রাউজার গুলো <strong> কে <b> এবং <em> কে <i> আকারে ডিসপ্লে করে
যদিও এই ট্যাগ গুলোর মধ্যে অর্থগত ভিন্নতা রয়েছেঃ এখানে <b> এবং <i> বোল্ড এবং ইতালিক টেক্সট বুঝায় কিন্ত <strong> এবং <em> ট্যাগ বুঝায় যে টেক্সগুলো গুরুত্বপূর্ণ।

এইচটিএমএল এর টেক্সট ফরম্যাটিং এর জন্য ট্যাগ গুলো নিচে পর্যায় ক্রমে দেখানো হলঃ

Tag	Description (বর্ণনা)
<b>	কোন text কে bold করতে এ tag ব্যবহার করা হয়।
<strong>	গুরুত্বপূর্ণ Text কে তুলে ধরতে এই tag ব্যবহৃত হয়।
<i>	কোন text কে italic করতে এই tag ব্যবহৃত হয়।
<em>	Emphasized text কে তুলে ধরতে এটি ব্যবহৃত হয়।
<small>	ছোট কোন Text কে তুলে ধরা এই tag এর দ্বারা।
<u>	Text কে underline করতে একে ব্যবহার করা হয়।
<mark>	কোন text কে হাইলাইট করতে <mark> tag ব্যবহার করা হয়।
<del>	Text কে remove করতে এই tag ব্যবহৃত হয়।
<ins>	কোন text কে add করতে এটি ব্যবহৃত হয়।
<sub>	Subscripted text কে চিহ্নিত করতে এই element ব্যবহৃত হয়।
<sup>	Superscripted text কে চিহ্নিত করতে এই element ব্যবহৃত হয়।

Root, এইচটিএমএল HTML

এইচটিএমএল এর স্টাইল (HTML Styles)

March 19, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

এইচটিএমএল এর স্টাইল (HTML Styles)

নাম-শরিফুল ইসলাম
Job category-PHP Coder
Email-bappiislam1988@gmail.com
Mob-01722806467
বিষয়- HTML Styles

এইচটিএমএল স্টাইল

প্রত্যেকটি এইচটিএমএল উপাদানের জন্য একটি ডিফল্ট বা নির্দিষ্ট স্টাইল থাকে পিছনের কালার বা ব্যাকগ্রাউন্ড কালার সাদা এবং টেক্সট এর কালার কালো। স্টাইল attribute এর মাধ্যমে আমরা এই ডিফল্ট কালার কে পরিবর্তন করতে পারি। নিচের উদাহরণ এ ব্যাকগ্রাউন্ড কালার ডিফল্ট সাদা থেকে light gray কালার এ পরিবর্তনকরা হয়েছে।

উদাহরণ

<!DOCTYPE html>
<html>
<body style="background-color:lightgrey">

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>
</html>

This is a heading

This is a paragraph.

Bgcolor attribute পুরাতন এইচটিএমএল ভার্সন এ সাপোর্ট করে কিন্তু এইচটিএমএল ৫ এ সাপোর্ট করে না

এইচটিএমএল স্টাইল attribute

এইচটিএমএল স্টাইল attribute নিম্নোক্ত syntax মেনে চলে

style="property:value"

এই প্রপার্টি হল সিএসএস এর প্রপার্টি এবং ভ্যালু হল সিএসএস এর ভ্যালু।

এইচটিএমএল টেক্সট কালার

এইচটিএমএল এর টেক্সট কালার পরিবর্তন করার জন্য color প্রপার্টি ব্যবহার করা হয়।
উদাহরণ

<body>
<h1 style="color:blue">This is a heading
<p style="color:red">This is a paragraph.</p>
</body>

ফলাফল

This is a heading

This is a paragraph.

এইচটিএমএল ফন্টস

Font-family প্রপার্টি দ্বারা ফন্টের ধরন পরিবর্তন করা হয়।
উদাহরণ

<body>
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
</body>

ফলাফল

This is a heading

This is a paragraph.

পুরাতন এইচটিএমএল এ <font> ট্যাগ সাপোর্ট করে কিন্তু এইচটিএমএল ৫ এ সাপোর্ট করে না।

এইচটিএমএল টেক্সট সাইজ

Font-size প্রপার্টি দ্বারা টেক্সট এর আকার পরিবর্তন করা হয়।
উদাহরণ

<body>
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>
</body>

ফলাফল

This is a heading

This is a paragraph.

এইচটিএমএল টেক্সট alignment

Text-align প্রপার্টি দ্বারা টেক্সট horizontal ভাবে কোন দিকে অবস্থান করবে তা নির্দেশ দেওয়া হয়
উদাহরণ

<body>
<h1 style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>
</body>

ফলাফল

Centered Heading

This is a paragraph.

<center> ট্যাগ পুরাতন এইচটিএমএল ভার্সন এ কাজ করে নতুন এইচটিএমএল এ কাজ করে না।

একনজরে প্রপার্টি গুলো

• স্টাইল attribute এর ব্যবহার

• background-color এর ব্যবহার

• color এর সাহায্যে টেক্সট কালার এর ব্যবহার

• টেক্সট এর ফন্ট এর জন্য font-family এর ব্যবহার

• টেক্সট এর আকার এর জন্য font-size এর ব্যবহার

এবং

• text-align এর ব্যবহার।

সি এস এস টিউটোরিয়াল (css tutorial)

সি এস এস ৩ টেক্সট ইফেক্টস (CSS3 Text Effects)

February 9, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

css3 তে বেশ কিছুই নতুন টেক্সট ইফেক্টস আছে।

এই অধ্যায়ে আপনারা নিচের অধ্যায়গুলো সম্পর্কে জানবেন-

text-shadow
word-wrap

ব্রাউজার সাপোর্ট (Browser Support)

এই প্রপার্টি দুটো css3 ভার্সন, তাই সকল নতুন বা latest version এর ব্রাউজার গুলো সাপোর্ট করবে।

নিম্নে দেয়া browser version গুলি প্রাথমিক version যা এই property কে সম্পূর্ণ সমর্থন করে।

সংখ্যা -o- দ্বারা browser version নির্দেশ করা হয়েছে-

প্রোপার্টি
text-overflow	4.0	12.0	6.0	7.0	3.1	11.0 9.0 -o-
word-wrap	23.0	12.0	5.5	3.5	6.1	12.1
word-break	4.0	12.0	5.5	15.0	3.1	15.0

text-shadow

কোন কিছুর Shadow বা ছায়া তৈরি করতে আপনাকে চারটা জিনিস ব্যাখ্যা করে দিতে হবে যথা- horizontal shadow, the vertical shadow, the blur distance, এবং the color of the shadow বা ছায়াটির রং কি হবে।
উদাহরণ-

h1{
     text-shadow: 5px 5px 5px #ff0000;
 }

আপনি color code এবং value গুলো পরিবর্তন করে কোন value এর কারনে কোন পরিবর্তন আসছে তা দেখে নিতে পারেন।

CSS3 Word Wrapping

যখন একটা word বা শব্দ অনেক বড় হয়, যা এরিয়ার ভিতর আঁটানো যায়না তখন শব্দটা বাইরে চলে যায়।
css3 তে word wrap প্রপার্টিটা শব্দটিকে তার area এর ভিতরে চেপে ঢুকতে বাধ্য করে, এতে যদি অন্য কোন শব্দের মাঝখানে ঢুকে যায় তবুও।
উদাহরণ-

P{
    word-wrap: break-word;
 }

নিম্নে কিছু টেক্সট প্রপার্টি (CSS3 Text Properties) দেয়া হল

hanging-punctuation = এটি ব্যাখ্যা করে যে কোন punctuation charecter কে বক্স এর বাইরে অবস্থান করান যায় কি না। কিন্তু এই প্রপার্টি কোন ব্রাউজার এখনো সাপোর্ট করে না।
punctuation-trim = কোন punctuation character কে ছাটার ক্ষেত্রে এটি ব্যবহার করা যায়। কিন্তু এই প্রপার্টি কোন ব্রাউজার এখনো সাপোর্ট করে না।
text-overflow = যখন কোন প্রপার্টি overflow করে তখন এই প্রপার্টি ব্যবহার করা যায়।
text-shadow = এই প্রপার্টি টি যে কোন text বা শব্দের shadow বা ছায়া ৈরি করে।
word-break = এটি সাধারণত লাইন ভাঙার কাজ করে।
word-wrap = খুব বড় শব্দগুলোকে ভেঙে পরের লাইন তৈরি করে।