টিউটরিয়ালবিডি » HTML http://tutorialbd.com/bn শিক্ষার্থীদের বাংলা ওয়েবসাইট Thu, 09 Sep 2010 02:20:59 +0000 http://wordpress.org/?v=2.9 en hourly 1 এইচটিএমএল৫ শেখার জন্য সাতটি ওয়েব সাইট এবং ই-বুক http://tutorialbd.com/bn/?p=4641 http://tutorialbd.com/bn/?p=4641#comments Thu, 09 Sep 2010 02:20:59 +0000 টিউটো http://tutorialbd.com/bn/?p=4641 কয়েকদিন আগেই বলেছি এইচটিএমএল৫, সিএসএস৩ এবং জে-কোয়েরী ওয়েবের চেহারা পাল্টাতে এসেছে। এইচটিএমএল৫ এর কিছু কিছু ফিচার এখনো অনেক ব্রাউজার ঠিকমতো সাপোর্ট করে না। আর তাই ওয়েব ডেভলপারদের অনেকের মধ্যে এর জ্ঞানের অভাব আছে। বিশেষত আমি নিজেও এইচটিএমএল৫ এর অনেক ফিচারই জানি না। আর তাই সকলের জন্য সহায়ক হবে এই সাতটি ওয়েব।

A Web Developer’s Guide to HTML 5

2010-08-12_170336

একেবারে অ আ ক খ থেকে শিখানোর মতো ওয়েব এটি। একেবারে প্রাথমিকভাবে শিখতে গেলে চলে যান এখানে।

The WHATWG Blog

2010-08-12_170411

WHATWG ব্লগটিতে আলোচনার মাধ্যমে HTML5 এর বিষয়গুলো পরিষ্কার হওয়ার মতো সুবিধা পাওয়া যাবে।

Dive Into HTML 5

2010-08-12_170432

Dive Into HTML 5 বইটিতে হাতে ধরে শিখানো হয়েছে HTML5 i

HTML5 Doctor

2010-08-12_170501

Ask the Doctor অপশনের মতো ফিচার আছে এখানে যেখানে শিখতে গেলে কোন সমস্যা পেলে তার সমাধানর জন্য জিজ্ঞাস করার ব্যবস্থা আছে।

When can I use…

2010-08-12_170536

HTML5, CSS3, SVG সহ নতুন নতুন ব্যবহারগুলোর আলোচনা রয়েছে।

HTML5 Visual Cheat Sheet

2010-08-12_170612

এখানে HTML5 এর ট্যাগের বিবরণ দেওয়া আছে।

HTML5 Gallery

2010-08-12_170634

HTML5 gallery এ মূলত: HTML5 এর নান্দনিক ব্যবহারিক দিকগুলো তুলে ধরা হয়েছে। আর এর মাধ্যমে HTML5 শিখার গুরুত্বও দেওয়া হয়েছে। আশা করি এই ওয়েব গুলো আমাদের শিক্ষার মান বৃদ্ধিতে সহায়ক হবে। সাবাইকে আমার পরের লেখাগুলো অনুসরণ করার আমন্ত্রণ জানিয়ে এখানেই শেষ করছি।

]]> http://tutorialbd.com/bn/?feed=rss2&p=4641 0 HTML5 টিউটরিয়াল পর্ব-২ http://tutorialbd.com/bn/?p=4191 http://tutorialbd.com/bn/?p=4191#comments Wed, 11 Aug 2010 18:14:57 +0000 টিউটো http://tutorialbd.com/bn/?p=4191 আগের পর্বে বেশ কিছু নতুন ফিচার নিয়ে কাজ করেছিরাম। এখন দেখে নিন আরো কিছু ফিচার যার মাধ্যমে HTML5 এর জয় জয় কার।

৮. header ও footer ট্যাগ:

আগের মতো সিএসএসের পায়ে ধরার দরকার হবে না।

  1. <div id=”header”>
  2. …
  3. </div>
  4. <div id=”footer”>
  5. …
  6. </div>

এর মতো করে না লিখে

  1. <div id=”header”>
  2. …
  3. </div>
  4. <div id=”footer”>
  5. …
  6. </div>

এরকম লিখলেই চলবে।

৯. ফরম তৈরীতে আরও ফিচার

ফরম তৈরীতে আরও সুন্দর সুন্দর ফিচার এনে দিয়েছে। নিচের ভিডিও টিউটরিয়ালটিতে দেখতে পাবেন। কোড সহ আউটপুট

১০. Required এর ব্যবহার:

সয়ংক্রিয়ভাবে ভেলিডেশন চেকের মতো করে ফরমে ইফেক্ট সৃষ্টি করা যায়। ধরুন আপনি চান যে, কোন টেক্স বক্স খালি থাকলে কোন বাটন কাজ করবে না। তহলে, নিচের মতো করে HTML5 কোড লিখলেই চলবে।

  1. <form method=”post” action=”">
  2. <label for=”someInput”> Your Name: </label>
  3. <input type=”text” id=”someInput” name=”someInput” placeholder=”Douglas Quaid” required>
  4. <button type=”submit”>Go</button>
  5. </form>

বক্সটি খালি থাকলে Go বাটনে চাপলে টেক্সট বক্স হাইলাট হবে।

১১. অডিও প্লে

আরও মজার বেপার হলো খুব সহজেই অডিও ভিডিও এমবেড করা যাবে এখন।

  1. <audio autoplay=”autoplay” controls=”controls”>
  2. <source src=”file.ogg” />
  3. <source src=”file.mp3″ />
  4. <a href=”file.mp3″>Download this file.</a>
  5. </audio>এ্ই কোড লিখলেই হলো। সয়ংক্রিয়ভাবে চলবে অডিও ফাইল

১২. ভিডিও প্লে

  1. <video controls preload>
  2. <source src=”cohagenPhoneCall.ogv” type=”video/ogg; codecs=’vorbis, theora’” />
  3. <source src=”cohagenPhoneCall.mp4″ type=”video/mp4; ’codecs=’avc1.42E01E, mp4a.40.2′” />
  4. <p> Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a> </p>
  5. </video>

ভিডিও চলেবে এই কোড লিখলেই।

]]> http://tutorialbd.com/bn/?feed=rss2&p=4191 0 HTML5 এর নতুনত্ব পর্ব-১ http://tutorialbd.com/bn/?p=4182 http://tutorialbd.com/bn/?p=4182#comments Wed, 11 Aug 2010 13:31:05 +0000 টিউটো http://tutorialbd.com/bn/?p=4182 HTML5 শেখার জন্য ৭ টি ওয়েবসাইটের ঠিকানা দিয়েছিলাম কিছুদিন আগে। এখন HTML5 এর নতুন নতুন ফিচারগুলোর সাথে পরিচিত হবো। আশা করি ভবিষ্যত ওয়েব নির্মানে এটি আমাদের এগিয়ে যেতে সহায়তা করবে।

১. নতুন Doctype ডিক্লার করা:

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

২. ছবির প্রকাশনা

এখন নতুনভাবে দেখতে পাবেন ছবির প্রকাশনা।

  1. <figure>
  2. <img src=”path/to/image” alt=”About image” />
  3. <figcaption>
  4. <p>This is an image of something interesting. </p>
  5. </figcaption>
  6. </figure>

এ পদ্ধতিতে আরও সুন্দরভাবে ছবি প্রকাশ করা যাবে। যদিও এটা অনেকের কাছে বাড়তি ও বিরক্তকর কোড বলে মনে হয়।

৩. Type এট্রিবিউট ব্যবহার হবে না আর

জাভাস্ক্রিপ্ট ও সিএসএস এর ফাইল কল করার জন্য টাইপ ডিফাইন করা হতো নিচের মতো করে-

  1. <link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
  2. <script type=”text/javascript” src=”path/to/script.js”></script>

মজার বেপার হলো এখন আর সেটা উল্লেখ করার দরকার নাই । নিচের মতো কোড লিখলেই চলবে-

  1. <link rel=”stylesheet” href=”path/to/stylesheet.css” />
  2. <script src=”path/to/script.js”></script>

৪. কষ্ট করে এখন আর ট্যাগ এর শেষ অংশ লিখতে হবে না

পূর্বে : <p class=myClass id=someId> Start the reactor.</p>

পরে: <p class=myClass id=someId> Start the reactor.

৫. কনটেন্ট সম্পাদনার মজার ও সহজ উপায়

HTML5 এর নতুনত্ব

contenteditable=”true” এর ব্যবহারের মাধ্যমে সহজে সম্পাদনা করা যাবে কনটেন্ট।

নিচের কোডগুলো দেখুন:

  1. <!DOCTYPE html>
  2. <html lang=”en”>
  3. <head>
  4. <meta charset=”utf-8″>
  5. <title>untitled</title>
  6. </head>
  7. <body>
  8. <h2> To-Do List </h2>
  9. <ul contenteditable=”true”>
  10. <li> Break mechanical cab driver. </li>
  11. <li> Drive to abandoned factory
  12. <li> Watch video of self </li>
  13. </ul>
  14. </body>
  15. </html>

৬. ই-মেইল ইনপুট বক্স

এখন আগের মতো ঝামেলা করতে হবে না ইনপুটবক্স বানাতে। ই-মেইল ইনপুট বক্স সহজেই মনে রাখবে আপনার পূর্বে উল্লেখিত ইমেইল ঠিকানাগুলো।

  1. <!DOCTYPE html>
  2. <html lang=”en”>
  3. <head>
  4. <meta charset=”utf-8″>
  5. <title>untitled</title>
  6. </head>
  7. <body>
  8. <form action=”" method=”get”>
  9. <label for=”email”>Email:</label>
  10. <input id=”email” name=”email” type=”email” />
  11. <button type=”submit”> Submit Form </button>
  12. </form>
  13. </body>
  14. </html>

৭. টেক্স বক্সে ডিফল্ট টেক্স দেওয়ার সহজ সমাধান

আগের মতো জাভাস্ক্রিপ্ট নির্ভরশীল হতে হবে না সাধারন placeholder এর জন্য । এখন এসেছে placeholder এট্রিবিউট।

<input name=”email” type=”email” placeholder=”doug@givethesepeopleair.com” />

HTML5 এর নতুনত্ব পর্ব-১

]]> http://tutorialbd.com/bn/?feed=rss2&p=4182 0 HTML ফর্ম জাভাস্ক্রিপ্ট ইভেন্ট http://tutorialbd.com/bn/?p=3756 http://tutorialbd.com/bn/?p=3756#comments Sun, 06 Jun 2010 06:20:40 +0000 টিউটো http://tutorialbd.com/bn/?p=3756 বেশ কিছু দিন HTML এর নিয়মিত টিউটরিয়াল লিখছিলাম। সেখানে সর্ব শেষ টিউটরিয়াল ছিল ফর্ম ডিজাইনের উপরে। ওয়েবে ফর্ম ডিজাইন করার পর সাধারনত: তাকে কাজ করার জন্য জাভাস্ক্রিপ্ট বা পিএইচপি ব্যবহার করতে হয়। ফর্মের টেক্সটবক্স,ইনপুট বক্স,বাটন,চেকবক্স ইত্যাদির ক্লিক ডাবলক্লিক, ফোকাস,লস্ট ফোকাস ইত্যাদি ইভেন্ট সম্পর্কে আজকের আলোচনা। ছোট জাভাস্ক্রিপ্ট দিয়ে কাজটি উদ্ধার করতে হবে,তা না হলে সম্পুর্ণ বেপারটি বুঝা যাবে না।
tutorialbd,html,javascript

লিংক ইভেন্ট

onClick

এর মাধ্যমে ক্লিকের পরের কি হবে তা প্রকাশ করে দিতে পারেন। নিচের কোডটা দেখুন

<IMG SRC = http://tutorialbd.files.wordpress.com/2010/03/logo.gif onClick = “alert(‘This is Logo of TutorialBD.com’)”>

আউটপুট দেখুন: ছবিটিতে ক্লিক করলেই This is Logo of TutorialBD.com কমান্ডটি দেখা যাবে।

onDblClick

onDblClick এর জায়গায় onDblClick ণিখে কোড এক্সিকিউট করলে , ছবিটিতে ডাবল ক্লিক করলে একই ঘটনা ঘটবে।

mouseOut

মাউস কোন একটি লিঙ্কের উপর থেকে চলে গেলে,সেই ইভেন্টটি কাজ করবে।

mouseOver

মাউসটি কোন লিংকের উপরে আসলে সেই ইভেন্টটি কাজ করবে।

ইনপুট ইভেন্ট

blur

কোন একটি ইনপুট অবজেক্ট থেকে সরে গিয় অন্য অবজেক্টে কাজ করার সময়টাকে বুঝায়। (ফিজুয়ালবেসিকে এটাকে LostFocus বলা হয়।) সাধারনত: ডাটা চেক করতে এটি ব্যবহার করা হয়।নিচের কোডটা দেখুন।

<INPUT TYPE = text onBlur = “alert(‘Lost focus’)”>

এবার আউটপুট দেখুন। ইনপুট বক্সে কিছু লিখুন ।এবার অন্য কোথাও ক্লিক করুন। এলার্ট ব্কটি আসবে।

তাহলো আমরা একটি জাভাস্ক্রিপ্ট ফাংশনের মাধ্যমে এর ব্যবহারিক দিক দেখবো।

Enter email address <INPUT TYPE="text" VALUE=""          NAME="userEmail" onBlur=addCheck()>

<script type="text/javascript" language="JavaScript">

function addCheck() {
alert("Please check your email details are correct          before submitting")
}

</script>

পরবর্তিতে নিচের ইভেন্টগুলো আলোচনা করা হবে:

  • change
  • focus
  • reset
  • select
  • submit

টিউটরিয়ালবিডির ভক্ত হিসেবে আমি মনে করি ফিড সাবক্রাইব করার সুবিধা নিতে ভুলবেন না। আর টিউটরিয়ালবিডির লিংকটি আপনার সাইটের (যদি থাকে) কোন অংশে প্রদান করে-এগিয়ে চলার পথ সহজ করলে আমারা আরও নতুন নতুন টিউটরিয়াল নিয়ে হাজির হতে পারবো। ই-মেইলের মাধ্যমে অনেকেই টিউটিরয়াল পড়ছেন। এ পোস্ট লেখা পর্যন্ত প্রায় ৩০০+ জনকে প্রতিটি টিউটরিয়াল ই-মেইলের মাধ্যমে পাঠানো হচ্ছে। আপনি যদি ই-মেইল পাঠক হতে চান তাহলে এখানে আপনার ইমেইল আইডি দিয়ে দিন, তার পর নিজের মেইল ব্ক্স থেকে একটিভেট করে নিন। এছাড়াও টুইটারে,গুগল বাজ এবং ফেসবুকে টিউটরিয়ালবিডিকে পাবেন।

]]> http://tutorialbd.com/bn/?feed=rss2&p=3756 6 HTML টিউটরিয়াল : ফরম ডিজাইন http://tutorialbd.com/bn/?p=3488 http://tutorialbd.com/bn/?p=3488#comments Tue, 13 Apr 2010 10:43:05 +0000 টিউটো http://tutorialbd.com/bn/?p=3488 জাভাস্ক্রিপ্ট টিউটরিয়াল লিখতে গিয়ে একটু হোচট খেলাম এই দেখে যে, HTML এর ফরম ডিজাইনের উপর এখনো টিউটরিয়াল লেখা হয় নি। আমরা অনেক সময় টেক্সটবক্স, বাটন,চেক বক্স, অপশন ইত্যাদি নিয়ে কাজ করি। এগুলোর ডিজাইন বানানো হয় HTML আর সিএসএস দিয়ে। আজ আমরা সহজ সরল ভাষায় ফরম ডিজানের পদ্ধতি নিয়ে কথা বলবো।
১. টেক্সট বক্স
২. টেক্সট এরিয়া
৩. রেডিও বাটন
৪. চেক বক্স

১. টেক্সট বক্স (এক লাইন)

টেক্সট বক্সই প্রধানতম ইলিমেন্ট। এর মাধ্যমে সাধারনত ইউজারের কাছ থেকে ডাটা নেয়া হয়। নিচের কোডের মাধ্যমে একটি টেক্সট বক্স তৈরী করা হয়।

<input type="text" name="mail" size="25">

input

এই ট্যাগের মাধ্যমে বিভিন্ন ফর্ম অবজেক্ট কল করা হয়।

type=”text”

বিভিন্ন ধরনের অবজেক্টের মধ্যে টেক্স অবজেক্টটির জন্য type=”text” লেখা হয়।

size=”25″

২৫ টি অক্ষরের ধারন ক্ষমতা সম্পন্ন টেক্সট বক্স এটি। অবজেক্টের ধারন ক্ষমতা অনুসারে এর সাইজ দিতে হবে। নামের একটি অংশের জন্য সাইজ ১৫ এবং ঠিকানার জন্য আরও বড় সাইজের টেক্সট বক্সের প্রয়োজন হতে পারে।

name

টেক্সট বক্সের নামটির মাধ্যমে টেক্সট বক্সটিকে কল করা হতে পারে। কোন একটি ডাটা ইনপুট দিলে তা name এ সংগ্রিহিত হয়। যদি name=fname হয়, ইউজার যদি Karim ইনপুট দেয় তাহলে
fname=Karim হবে।

২. টেক্সট এরিয়া

একাধিক লাইনের টেক্সট লেখতে টেক্সটএরিয়া ব্যবহার করা হয়। টেক্সএরিয়ার জন্য input type=”…” ব্যবহারের দরকার হয় না। নিচের টেক্সএরিয়ার জন্য নিচের কোড লিখতে হয়।

<textarea cols="50" rows="4" name="comment"></textarea>
কলাম ও রো এর মান পরিবর্তনের মাধ্যমে এর সাইজ পরিবর্তন করা হয়। সিএসএস ব্যবহার করে অবশ্য আরও ভাল ডিজাইনের টেক্সটএরিয়া বানানো যায়। পরবর্তিতে একটি টিউটরিয়ালের মাধ্যমে ফর্ম ডিজাইনে সিএসএস এর ব্যবহার দেখাবো।

৩. রেডিও বাটন

বিভিন্ন জরিপ বা একাধিক অপশন থেকে একটি সিলেক্ট করতে রেডিও বাটন ব্যবহার করা হয়।
১.

১.<input type="radio" name="choices" value="choice1">
একই গ্রুপের সবগুলো বাটনের একই নাম থাকতে হয়। ভিন্ন নাম ব্যবহার করলে তারা ভিন্ন গ্রুপ হিসেবে আচরণ করবে। যেমন-

<form name=myform>
<input type="radio" name=myradio1 value="1">one
<input type="radio" name=myradio2 value="2">two
<input type="radio" name=myradio3 value="3">three
</form>

one

two

three

কোন একটি বাটনকে আগে থেকে সিলেক্ট করে রাখতে তার শেষে checked কথাটি লিখে দিতে হবে।আর কোন বাটনকে নিস্ক্রিয় রাখতে disabled লিখে দিতে হবে।

<form name=myform>
<input type="radio" name=myradio value="1" disabled>one
<input type="radio" name=myradio value="2" checked disabled>two
<input type="radio" name=myradio value="3" disabled>three
</form>

one

two

three

৪. চেক বক্স

চেক বক্সের জন্য অনেকটা রেডিও বাটনের মতোই কোড লিখতে হয়।

<form name=myform>
<input type="checkbox" name=mybox value="1" >one
<input type="checkbox" name=mybox value="2" >two
<input type="checkbox" name=mybox value="3" >three
</form>

one

two

three

একই ভাবে কোর বাটনকে চেক করা, নিস্ক্রিয় করাও যায়।

HTML টিউটরিয়াল সূচি-পত্র

HTMLপর্ব- এক: আমার প্রথম ওয়েব সাইট (প্রাথমিক ধারণা)

HTMLপর্ব- দুই: রঙের ব্যবহার

HTMLপর্ব- তিন: ব্যাকগ্রাউন্ড এ রঙের ব্যবহার

HTMLপর্ব- চার: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা-১

HTMLপর্ব-পাঁচ: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা-২

HTML পর্ব-৬ HTML এ Font ট্যাগের ব্যবহার

HTML টিউটরিয়াল : ফরম ডিজাইন

]]> http://tutorialbd.com/bn/?feed=rss2&p=3488 6 HTML এ Font ট্যাগের ব্যবহার (HTML টিউটোরিয়াল – 6) http://tutorialbd.com/bn/?p=2965 http://tutorialbd.com/bn/?p=2965#comments Mon, 22 Feb 2010 19:59:35 +0000 ashim http://tutorialbd.com/bn/?p=2965  যা লাগবে:

html ব্যবহার করে code লেখার জন্য আমাদের নতুন কোন সফটওয়্যারের প্রয়োজন নেই , আমরা আমাদের অতি পরিচিত নোটপ্যাড ব্যবহার করেই html এর code লিখতে পারি। এভাবে লেখা কোড আমরা .html এক্সটেনশন যেমন index.html দ্বারা Save করে যেকোন ব্রাওজার যেমন Internet explorer, Mozila , Google chrome, Opera দ্বারা দেখতে পারি।  

   

আমাদের Code এবং এর বিভিন্ন অংশ:

আমরা একটা নোটপ্যাড open করে নিচের code টুকু লিখি।  

   

Code:

<html>  

<head>  

 <title>  This is title of your web site.</title>  

</head>  

<body bgcolor=”green” >  

<p>   

This is a paragaph. This is a paragaph. This is a paragaph. <br>  

This is a paragaph. This is a paragaph. This is a paragaph. <br>  

This is a paragaph. This is a paragaph. This is a paragaph. <br>  

This is a paragaph. This is a paragaph. This is a paragaph. <br>  

</p>  

</body>  

</html>  

   

এখন file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করি । save করা index.html ফাইলটি Internet explorer দিয়ে open করলে নিচের মত দেখাবে।  

  

  

   

আসলে এটা একটা প্যারাগ্রাফ ছারা আর কিছু নয়। কিন্তু আমরা যদি প্যারাগ্রাফটির text font, text size, font color পরিবর্তন করতে চাই তাহলে আমাদেরকে <font> ট্যাগ ব্যবহার করতে হবে। এখন আমরা নিচের code টুকু লক্ষ করি, 

 

Code:

<html> 

<head>  

 <title>  This is title of your web site.</title>  

</head> 

 <body bgcolor=”green” >  

<p>  

<font  face=”Verdana” size=”4″color=”red”> 

This is a paragaph. This is a paragaph. This is a paragaph. <br> 

This is a paragaph. This is a paragaph. This is a paragaph. <br> 

This is a paragaph. This is a paragaph. This is a paragaph. <br> 

This is a paragaph. This is a paragaph. This is a paragaph. <br> 

</font> 

 </p> 

</body>  

</html>  

   

এখন পূনরায় file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করি । save করা index.html ফাইলটি Internet explorer দিয়ে open করলে নিচের মত দেখাবে। 

 

কি আমরা কি কোন পরিবর্তন দেখতে পাচ্ছি? হ্যা অবশ্যই! আমরা প্যারাগ্রাফের text font  হিসেবে Verdana , text size আগের তুলনায় বেশ বড় আর text color হিসাবে red প্রদর্শন হতে দেখছি। 

<font> ট্যাগ বিশ্লেষণ :

text font, text size, font color পরিবর্তন করতে <font> ট্যাগ ব্যবহার করা হয়। অন্যান্য ট্যাগের মতই font ট্যাগের ক্ষেত্রেও  শেষ ট্যাগ </font> দিতে হয়। আমরা <font  …………………> তে যে face=”Verdana”, size=”4″, color=”red” লিখেছি এখানে face, size , এবং color কে <font>ট্যাগের অ্যাট্রিবিউটস বলা হয়। আমরা এগুলোর প্রয়োজনীয় পরিবর্তন করে ব্যবহার করে আমরা web page  কে অনেক বেশি সুন্দর করতে পারি।

HTML টিউটরিয়াল সূচি-পত্র

HTMLপর্ব- এক: আমার প্রথম ওয়েব সাইট (প্রাথমিক ধারণা)

HTMLপর্ব- দুই: রঙের ব্যবহার

HTMLপর্ব- তিন: ব্যাকগ্রাউন্ড এ রঙের ব্যবহার

HTMLপর্ব- চার: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা-১

HTMLপর্ব-পাঁচ: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা-২

HTML পর্ব-৬ HTML এ Font ট্যাগের ব্যবহার

]]> http://tutorialbd.com/bn/?feed=rss2&p=2965 1 আর শর্টকার্ট নয় সঠিক নিয়মে সবাই মিলে শিখি ওয়েব ডিজাইন ও ওয়েব প্রোগ্রামিং (HTML-5) http://tutorialbd.com/bn/?p=2884 http://tutorialbd.com/bn/?p=2884#comments Thu, 04 Feb 2010 04:40:21 +0000 ashim http://tutorialbd.com/bn/?p=2884 আর শর্টকার্ট নয় সঠিক নিয়মে সবাই মিলে শিখি ওয়েব ডিজাইন ও ওয়েব প্রোগ্রামিং (HTML-4) এর মাধ্যমে কিভাবে HTML এ প্যারাগ্রাফ লেখতে হয় তা দেখেছি  এখন  আমরা প্যারাগ্রাফ এর মধ্যে লাইন ব্রেক তৈরি করা শিখব।

 আর শর্টকার্ট নয় সঠিক নিয়মে সবাই মিলে শিখি ওয়েব ডিজাইন ও ওয়েব প্রোগ্রামিং (HTML-4) এ ব্রাউজারে যা প্রদর্শিত হয়েছিল তা ছিল নিম্নরূপ,

 

উপরের ছবিতে আমরা যে তিনটি প্যারাগ্রাফ  দেখতে পাচ্ছি সেখানে কোন লাইন ব্রেক ব্যবহার করা হয়নি। ৩য় প্যারাগ্রাফটির জন্য প্রয়োজনীয় code ছিল নিম্নরূপ,

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

৩য় প্যারাগ্রাফে লক্ষনীয় বিষয় হল, আমরা coding করার সময় একই লাইনে This is a paragraph. লেখাটি তিনবার করে ব্যবহার করেছি। কিন্তু ব্রাউজার প্রদর্শন করার সময় তা একই লাইনে তিন এর অধিক বার  প্রদর্শন করেছে। আসলে HTML এ coding করার সময় আমরা যদি কোন লাইন ব্রেক ব্যবহার না করি তবে আমরা যত লাইনই লেখি না কেন ব্রাউজার সব এক লাইনে ধরে নেবে । এখন আমরা এই প্যরাগ্রাফ তিনটিকে যথাযথ স্থানে লাইনব্রেক ব্যবহার করে উপস্থাপন করব ।

আমাদের প্রয়োজনীয় Code এবং এর বিভিন্ন অংশ:

আমরা একটা নোটপ্যাড open করে নিচের code টুকু লিখি।

Code:

<html>

<head>

 <title> This is title of your web site.</title>  

</head>

 <body bgcolor=”green“>  

This is the body of your web site.
 
<p>This is a paragraph.</p><br>
<p>
This is a paragraph.This is a paragraph.This is a paragraph. <br>
This is a paragraph.This is a paragraph.This is a paragraph. <br>
</p>

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

</body>

</html>

 

এখন file মেনু থেকে Save as এ ক্লিক করে File name: index.html  ,   Save as type : All files,  দিয়ে save করি । save করা index.html ফাইলটি Internet explorer দিয়ে open করলে নিচের মত দেখাবে।

 

Code বিশ্লেষণ:

লাইন ব্রেক তৈরি করার জন্য <br> ট্যাগ ব্যবহার করা হয় , তবে এক্ষেত্রে শেষ ট্যাগ ব্যবহারের প্রয়োজন নেই । আমরা যে লাইনের পর লাইন ব্রেক দিতে চাই সেই লাইনের শেষে শুধুমাত্র <br> লেখলেই চলবে । যেমন আমি লিখেছি,

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

একাধিক লাইন ব্রেক দেওয়ার জন্য প্রতিটি লাইনের জন্য একটি করে <br> দিতে হবে ।

HTML টিউটরিয়াল সূচি-পত্র

HTMLপর্ব- এক: আমার প্রথম ওয়েব সাইট (প্রাথমিক ধারণা)
HTMLপর্ব- দুই: রঙের ব্যবহার
HTMLপর্ব- তিন: ব্যাকগ্রাউন্ড এ রঙের ব্যবহার
HTMLপর্ব- চার: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা-১
HTMLপর্ব-পাঁচ: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা-২

]]> http://tutorialbd.com/bn/?feed=rss2&p=2884 0 আর শর্টকার্ট নয় সঠিক নিয়মে সবাই মিলে শিখি ওয়েব ডিজাইন ও ওয়েব প্রোগ্রামিং (HTML-4) http://tutorialbd.com/bn/?p=2864 http://tutorialbd.com/bn/?p=2864#comments Wed, 03 Feb 2010 07:32:25 +0000 ashim http://tutorialbd.com/bn/?p=2864 আর শর্টকার্ট নয় সঠিক নিয়মে সবাই মিলে শিখি ওয়েব ডিজাইন ও ওয়েব প্রোগ্রামিং (HTML-3) এর মাধ্যমে আমরা HTML এ HEADING বা শিরোনাম লিখতে হয় তা দেখেছি আজ আমরা কিভাবে HTML এ প্যারাগ্রাফ লিখতে হয় তা দেখব।

আমাদের প্রয়োজনীয় Code এবং এর বিভিন্ন অংশ:

আমরা একটা নোটপ্যাড open করে নিচের code টুকু লিখি।

Code:

<html>

<head>

 <title> This is title of your web site.</title>  

</head>

 <body bgcolor=”green“>  

This is the body of your web site.
 
<p>This is a paragraph.</p>
<p>
This is a paragraph.This is a paragraph.This is a paragraph.
This is a paragraph.This is a paragraph.This is a paragraph.
</p>

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

</body>

</html>

 

এখন file মেনু থেকে Save as এ ক্লিক করে File name: index.html  ,   Save as type : All files,  দিয়ে save করি । save করা index.html ফাইলটি Internet explorer দিয়ে open করলে নিচের মত দেখাবে।

 

 

Code বিশ্লেষণ:

HTML ব্যবহার করে প্যরাগ্রাফ তৈরি করার জন্য <p> ট্যাগ ব্যবহার করা হয়। <p> ট্যাগের ক্ষেত্রেও অন্যান্য ট্যাগের মত শেষ ট্যাগ দিতে হয়, আর তা হল </p> অর্থাৎ আমরা যদি একটা প্যরাগ্রাফ লেখতে চাই তবে তা <p>——–</p> এর মাঝে লেখতে হবে। যেমন আমি লিখেছি,

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

HTML টিউটরিয়াল সূচি-পত্র

HTMLপর্ব- এক: আমার প্রথম ওয়েব সাইট (প্রাথমিক ধারণা)
HTMLপর্ব- দুই: রঙের ব্যবহার
HTMLপর্ব- তিন: ব্যাকগ্রাউন্ড এ রঙের ব্যবহার
HTMLপর্ব- চার: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা

]]> http://tutorialbd.com/bn/?feed=rss2&p=2864 1 আর শর্টকার্ট নয় সঠিক নিয়মে সবাই মিলে শিখি ওয়েব ডিজাইন ও ওয়েব প্রোগ্রামিং (HTML-3) http://tutorialbd.com/bn/?p=2645 http://tutorialbd.com/bn/?p=2645#comments Sun, 17 Jan 2010 05:23:52 +0000 ashim http://tutorialbd.com/bn/?p=2645 আর শর্টকার্ট নয় সঠিক নিয়মে সবাই মিলে শিখি ওয়েব ডিজাইন ও ওয়েব প্রোগ্রামিং (HTML-2)  এর মাধ্যমে আমরা কিভারে HTML  এর মাধ্যমে একটা ওযেব পেজের ব্যাকগ্রাউন্ড কালার দিতে হয় তা দেখেছি এখন আমরা কিভবে HTML এ HEADING বা শিরোনাম  লিখতে হয় তা জানব।

আমাদের প্রয়োজনীয় Code এবং এর বিভিন্ন অংশ:

আমরা একটা নোটপ্যাড open করে নিচের code টুকু লিখি।

Code:

<html>

   <head>     

 

      <title> This is title of your web site.</title>

  

   </head>

<body bgcolor=”green”> 

This is the body of your web site.

 <h1>This is an example of  heading 1</h1>

<h2>This is an example of  heading 2</h2>

<h3>This is an example of  heading 3</h3>

<h4>This is an example of  heading 4</h4>

<h5>This is an example of  heading 5</h5>

 <h6>This is an example of  heading 6</h6>

 </body>

</html>

 

এখন file মেনু থেকে Save as এ ক্লিক করে File name: index.html  ,   Save as type : All files,  দিয়ে save করি । save করা index.html ফাইলটি Internet explorer দিয়ে open করলে নিচের মত দেখাবে।

C0de বিশ্লেষণ:

HTML দিয়ে HEADING বা শিরোনাম  লেখার জন্য <h1>,<h2>,<h3>,<h4>,<h5>,<h6> এই ছয়টি ট্যাগ ব্যবহার করা হয়। তবে অবশ্যই ট্যাগগুলির শেষ ট্যাগ অর্থাৎ যথাক্রমে </h1>,</h2>,</h3>,</h4>,</h5>,</h6> ব্যবহার করতে হবে। <h1>………</h1>  এর মাঝে যে লেখাটি লেখা হবে তার   Size সবচেয়ে বড় হবে  এবং পর্যায়ক্রমে অন্যগুলার  Size ছোট হবে । আমাদের code টি এবং ব্রাওজারে এর প্রদর্শিত রূপটি খেয়াল করলে বিষয়টি অরো স্পষ্ট হবে । 

এখন আমরা যদি <h1> ট্যাগ ব্যবহার করে একটি শিরোনাম লেখতে চাই তবে তা নিচের  code টুকুর মত লেখতে হবে,

                                                                             <h1>This is an example of  heading 1</h1>                           ।

]]> http://tutorialbd.com/bn/?feed=rss2&p=2645 2 আর শর্টকার্ট নয় সঠিক নিয়মে সবাই মিলে শিখি ওয়েব ডিজাইন ও ওয়েব প্রোগ্রামিং (HTML-2) http://tutorialbd.com/bn/?p=2617 http://tutorialbd.com/bn/?p=2617#comments Wed, 30 Dec 2009 11:53:11 +0000 ashim http://tutorialbd.com/bn/?p=2617

আর শর্টকার্ট নয় সঠিক নিয়মে সবাই মিলে শিখি ওয়েব ডিজাইন ও ওয়েব প্রোগ্রামিং (HTML-1) এর মাধ্যমে আমরা HTML সম্পর্কে প্রাথমিক ধারণা অর্জন করেছি। এখন আমরা HTML ব্যবহার করে কিভাবে একটা ওয়েব পেজের ব্যকগ্রাউন্ড কালার দিতে হয় সেই বিষয়টি দেখব।

আমাদের প্রয়োজনীয় Code এবং এর বিভিন্ন অংশ:

আমরা একটা নোটপ্যাড open করে নিচের code টুকু লিখি।

Code:

<html>

<head>

<title> This is the title of your web site.</title>

</head>

<body bgcolor=”green”>

This is the body of your web site.

</body>

</html>

এখন file মেনু থেকে Save as এ ক্লিক করে File name: index.html  ,   Save as type : All files,  দিয়ে save করি । save করা index.html ফাইলটি Internet explorer দিয়ে open করলে নিচের মত দেখাবে।

C0de বিশ্লেষণ:

<html> ,<head>,<title>,<body> ট্যাগ গুলির সাথে আমরা এখন পরিচিত। আমরা যদি একটি ওয়েব পেজে HTML ব্যবহার করে ব্যকগ্রাউন্ড কালার দিতে চাই তাহলে আমাদেরকে <body> ট্যাগের মধ্যে body লেখার পর একটা স্পেস দিয়ে bgcolor=”  “ লেখতে হবে এখন আমরা “  ” এর মধ্যে BLACK, SILVER, GRAY, WHITE, MAROON, RED, PURPLE, FUSCHSIA, GREEN, LIME, OLIVE, YELLOW, NAVY, BLUE, TEAL এবং AQUA এই ষেলটি রং এর যে কোন একটি লিখলে আমরা আমাদের তৈরিকৃত পেজের ব্যকগ্রাউন্ডে সেই কালারটি দেখতে পাব। যেহেতু case sensitive নয় তাই ছোট হতের অক্ষরে লিখলেও হবে, যেমন আমি লিখেছি

<body bgcolor=”green“>        ।

এছাড়া আমরা hexadecimal code ব্যবহার করেও ব্যাকগ্রাউন্ড কালার নির্বাচন করে দিতে পারি, যেমন আমরা উপরের কোডটি নিচের মত লেখতে পারি

<body bgcolor=”#00FF00“> ।

আমরা PHOTOSHOP এর color piker থেকে সহজেই আমরা বিভিন্ন কালারের জন্য hexadecimal code সংগ্রহ করতে পারি। এছাড়া নিচের চার্ট থেকেও আমরা এ কাজটি করতে পারি। যা হোক আমাদেরকে hexadecimal code এর শুরুতে একটা # চিহ্ন দিয়ে শুরু করতে হবে।

এখানেই শেষ নয় ব্যকগ্রাউন্ড কালার দেওয়ার আরও একটা মজার পদ্ধতি আছে। আমরা জানি  লাল, সবুজ আর নীল এই তিনটি রং হল মৌলিক রং আর অন্য সব রং হচ্ছে এই তিনটি রং এর সংমিশ্রনে তৈরি। তাই আমরা যদি coding  করে এই তিনটি রংকে মিশিয়ে নতুন রং তৈরি করতে পারি ও ব্যবহার করতে পারি তবে তা মন্দ হয় না। তাহলে আমরা সবুজ ব্যকগ্রাউন্ডের জন্য নিচের মত করে লিখতে পারি

<body bgcolor=”rgb(0,255,0)“>     ।

এখানে rgb অর্থ হল red green blue  আর (0,255,0) এর অর্থ হল রংটিতে যথাক্রমে লাল, সবুজ, নীল  রং এর পরিমান যথাক্রমে 0%, 100%, 0%  কারন আমরা বিশুদ্ধ সবুজ রং নিয়েছি। আর যে কোন রং এর মান 0-255 পর্যন্ত হতে পারে। যেহেতু g বা green এর মান 255 তাই তা 100%। তিনটি রং এর মান 0-255 এর মধ্যে  পরিবর্তন করে আমরা আমাদের ইচ্ছা অনুযায়ী নতুন নতুন রং তৈরি করতে পারি ।

শেষে দুটি কথা: ছোট একটা ব্যপার লিখতে গিয়ে অনেক বড় করে ফেললাম । অমিও বুঝতে পারিনি যে এত বড় হবে । লেখতে লেখতে অনেক কিছু মাথায় চলে এল তাই শেয়ার করলাম। এক ঘেয়েমি লাগলে ক্ষমা করবেন । কিন্তু যা লেখলাম ভবিষ্যতে coding  করতে  গিয়ে আমাকেও বারবার এই লেখাটিতে ফিরে দেখতে হবে। আর আমাদের শুধুমাত্র ব্যকগ্রাউন্ডের জন্য নয় Text formating এর জন্যও রং এর code নির্বাচন খুবই গুরুত্বপূর্ণ। তো রঙে রঙে রাঙিয়ে তুলুন আপনার ওয়েব পেজ। সবাই ভাল থাকবেন।

]]> http://tutorialbd.com/bn/?feed=rss2&p=2617 17