Menu

Monday, 14 May 2012

>>> HTML শিখুন- পর্ব ২

প্রায় প্রতিটা ওয়েবসাইট এ লগিন ফর্ম এবং রেজিস্ট্রেশান ফর্ম থাকে যা দিয়ে ইউজার রা রেজিস্ট্রেশান বা লগিন করতে পারে । তো আসুন কিভাবে আমরা সেই রেজিস্ট্রেশান ফর্ম এবং লগিন ফর্ম বানাতে পারি ।


HTML ফর্মঃ আপনার এইচটিএমএল ফাইল এর <body> ট্যাগ এর ভিতরে নিচের কোড টি paste করুন । 

<form>
Name: <input type=”text” name=”name” /><br />
Address: <input type=”text” name=”address” />
</form>
আপনি রান করলে আউট পুট নিচের মত দেখতে পাবেন-
Name:
Address:
এখানে আপনি ২ টি জিনিস ইনপুট দিতে পারবেন । একটি হল নাম আর একটি হল ঠিকানা । এবার আসুন আমরা নাম এবং  password কিভাবে ইনপুট দিতে হয় টা শিখব । নিচের কোড টি লিক্ষ করুন ।
<form>
Name: <input type=”text” name=”name” /><br />
Password: <input type=”password” name=”password” />
<input type=”submit” name=”submit” value=”Login” />
</form>?? ??? ??? ???- 
Name:
Password:


এখানে  Password এর ঘরে আপনি কোন কিছু টাইপ করলে টা Password  আকারেই দেখাবে ।এখানে Password  এর জন্য input type=”password”  এই কোড টি দিয়ে দেওয়া হয়েছে । আপনি যখন input type=”password” দিবেন তখন password দেখাবে আর যখন input type=”text” দিবেন তখন সেই টেক্সট এর ঘরে টাইপ করলে টেক্সট ই দেখাবে ।
<body>ট্যাগ এর ভিতরে  নিচের কোড টি পেস্ট করুন
<form>
<table width=”400″ border=”0″>
<tr>
<td width=”200″>Name:</td>
<td width=”200″><input type=”text” name=”name2″ /></td>
</tr>
<tr>
<td width=”200″>Password:</td>
<td width=”200″><input type=”password” name=”password” /></td>
</tr>
<tr>
<td width=”200″>Email:</td>
<td width=”200″><input type=”text” name=”email” /></td>
</tr>
<tr>
<tr>
<td width=”200″>Gender:</td>
<td width=”200″><input type=”radio” name=”sex” value=”male” />male<input type=”radio” name=”sex” value=”female” />female</td>
</tr>
<tr>
<td width=”200″>Hobbies:</td>
<td width=”200″><input type=”checkbox” name=”play” value=”male” />play<br /><input type=”checkbox” name=”Study” value=”female” />Study</td>
</tr>
<td width=”200″></td>
<td width=”200″><input type=”submit” name=”submit” value=”Register” /></td>
</tr>
</table>
</form> 
এবার রান করে আউট পুট দেখুন ।
Name:
Password:
Email:
Gender: male?
female
Hobbies: play?
Study


উপরের এই উদাহরনে টেক্সটবক্স Radio Button এবং Checkbox  তিনটিই একসাথে দেখান হয়েছে । আমি এখানে টেবিল এর মধ্যে টেক্সটবক্স গুলো নিয়েছি কারন হল টেবিল এর মধ্যে নিলে তেক্সতবক গুলো এদিক সেদিক সরে যায় না বরং এগুলোর alignment ঠিক  থাকে ।
N:B: সবসময় মনে রাখবেন   Radio Button অনেকগুলো অপশন থেকে যেকোনো একটা সিলেক্ট করার জন্য আর  Checkbox অনেকগুলো সিলেক্ট করার জন্য ব্যবহার করা হয় ।
HTML Iframe-
Iframe দিয়ে সাধারণত কোন ওয়েব পেজ এর ভিতরে অনেক সময় ছোট্ট করে অন্য কোন পেজ বা অন্য কোন ওয়েবসাইট দেখান হয় । যেমন নিচের কোড  টি খেয়াল করুন ।
<iframe src=”http://www.google.com/” frameborder=”0″></iframe>
আপনি আপনার  <body> ট্যাগ এর মধ্যে নিচের কোড টি পেস্ট করে এবার রান করলে নিচের মত দেখতে পাবেন যেখানে আপনি দেখতে পাচ্ছেন পেজ এর মধ্যে সম্পুরন   google চলে এসেছে । এবার আপনি আপনার মত অন্য পেজ এর লিংক দিয়ে টেস্ট করুন । এটিই হল মূলত iframe এর কাজ ।
এখানে  Google এর লিংক  এর বদলে আপনি অন্য লিংক এবাভে বসাবেন যে -  src=”http://www.google.com/ এর এখানে  src=”5.html  বসিয়ে দেন তাহলে  5.html  এই পেজ টি আপনার ওয়েবপেজ এর মধ্যে দেখাবে ।
HTML  animation
HTML  দিয়ে animation তৈরি করার জন্য ছোট্ট একটি কোড <marquee> ব্যবহার করা হয় । নিচের উদাহরন টি লক্ষ করুন ।
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>HTML Animation</title>
<style type=”text/css”>
#animation{
margin:0 auto;
width:500px;
height:300px;
background-color:#005100;
color:#FFFFFF;
}
</style>
</head><body>
<div id=”animation”><marquee>Welcome To Digital Bangladesh</marquee></div>
</body>
</html>
এবার এটিকে  আপনি রান করলে দেখতে পাবেন  Welcome To Digital Bangladesh লেখাটি   ডান থেকে  বামে  চলছে । এখন যদি আপনি এটিকে উলটা দিকে যেমন বাম থেকে ডানে দিতে চান তাহলে আপনি নিচের কোড টি লিখুন ।
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>HTML Animation</title>
<style type=”text/css”>
#animation{
margin:0 auto;
width:500px;
height:300px;
background-color:#005100;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id=”animation”><marquee direction=”right”>Welcome To Digital Bangladesh</marquee></div>
</body>
</html>
এবার রান করলে  Welcome To Digital Bangladesh লেখাটি বাম থেকে ডানে চলে যাবে । এখানে direction=”right” দেওয়ার কারনে এটি বাম থেকে ডানে চলে যাচ্ছে । এবার আপনি উপরে নিচে ডানে বামে যেকোনো দিকে direction দিতে পারেন ।
এখন আপনি যদি চান যে এটি একটি নিদিষ্ট কোন  জায়গার মধ্যে এটি থাকুক তাহলে width এবং height ঠিক করে দিন সিএসএস থেকে । নিচের উদাহরন টি লক্ষ করুন ।
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>HTML Animation</title>
<style type=”text/css”>
#animation{
margin:0 auto;
width:500px;
height:300px;
background-color:#005100;
color:#FFFFFF;
}
</style>
</head><body>
<div id=”animation”><marquee  behavior=”alternate”>Welcome To Digital Bangladesh</marquee></div>
</body>
</html>
এবার দেখুন যে একটি  নিদিষ্ট  জায়গার মধ্যে সবুজ ব্যাকগ্রাউন্ড নিয়ে Welcome To Digital Bangladesh  লেখাটি নড়ছে ।
এখানে  marquee  behavior=”alternate” দেওয়ার কারনে animation টি বামে এবং ডানে ২ দিকেই  নড়া চড়া করছে । আর  behavior=”scroll” দিলে এর গতি কম বেশি করা যাবে । যেমন

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>HTML Animation</title>
<style type=”text/css”>
#animation{
margin:0 auto;
width:500px;
height:300px;
background-color:#005100;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id=”animation”><marquee  behavior=”scroll”  scrollamount=”2″>Welcome To Digital Bangladesh</marquee></div>
</body>
</html>

এবার রান করলে আপনি দেখতে পাবেন  Welcome To Digital Bangladesh লেখাটি খুব ধীরে ধীরে যাচ্ছে । কারন এখানে  scrollamount=”2″> ব্যবহার করা হয়েছে ।

আপনি  যদি scrollamount বেশি দিয়ে দেন তাহলে animation খুব দ্রুত হবে । এবার আপনার ইচ্ছা । আশা করি বুঝতে পেরেছেন । ধন্যবাদ  ।
Posted by Anonymous at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)