Saturday, June 28, 2014

HTML এট্রিবিউট

সাধারনত, ট্যাগ কে মডিফাই করার জন্য এট্রিবিউট ইউজ করা হয়. এইচটিএমএল ট্যাগ এর কার্যক্রমকে বৃদ্ধি করার জন্য এট্রিবিউট ব্যবহার করা হয়। HTML এ তৈরি ওয়েবপেজকে আরও সুন্দর করার জন্য এট্রিবিউট ব্যবহার করা প্রয়োজন। এট্রিবিউট ব্যবহার ভাল জানতে পাড়লে আপনি আপনার ওয়েবপেজকে আকর্শনীয় করে তুলতে পাড়বেন। এটি ট্যাগ এর সাথে ব্যবহার করা হয়। অর্থাৎ ট্যাগ এর <…> ভিতরে এট্রিবিউট লিখতে হয়।
একটি এট্রিবিউট এর দুইটি অংশ থাকে। যথা:
1. Attribute name
2. value
যেমন, <tag attributes ="value">
আমরা চাইলে একই ট্যাগে একাধিক এট্রিবিউট ব্যবহার করতে পাড়ি। যেমন,
<tag attributes ="value" attributes ="value">

আমরা <table> ট্যাগ ব্যবহার করে টেবিল তৈরি করতে পাড়ি। এই ট্যাগের সাথে width এবং height এট্রিবিউট ব্যবহার করে এর প্রস্থ, উচ্চতা ঠিক করতে পারি।  যেমন,
<table width="200" height="150">

Class বা id attributes:

Class বা id attribute এর ব্যবহার প্রায় একই তবে কিছুটা ভিন্নতা আছে। এগুলো জাভাস্ক্রিপ্ট ও সিএসএস এ ভুমিকা রাখে। (পরবর্তীতে আমরা এ নিয়ে আলোচনা করব।)

Name এট্রিবিউট:

এটি ফরম বা অন্যান্ন ইনপুট এলিমেন্টের সাথে দেখা যায়। যেমন,
<input type="text" name="TextField" />

Title এট্রিবিউট:

এই attribute টি কোন এইচটিএমএল এলিমেন্ট এর শিরোনাম এবং ছোট popup টেক্স যুক্ত করে এমন ভাবে যুক্ত করে যখন ওয়েব পেজে ঐ শিরোনামের উপর মাউস রাখা হয় তখন ছোট popup টেক্সটি প্রদর্শন করে।
<h2 title="Hello There!">Titled Heading Tag</h2>

Align এট্রিবিউট:

এর সাহায্যে এলিমেন্টের সমান্তরাল অবস্থান পরিবর্তন করা যায়। এর সাহায্যে এলিমেন্টকে left, Right or center করা যায়।
<h2 align="center">hello world</h2>

Valign এট্রিবিউট:

এর সাহায্যে এলিমেন্টের উলম্ব(Vertically)  অবস্থান পরিবর্তন করা যায়। এর সাহায্যে এলিমেন্টকে top, middle, bottom করা যায়।
<h2 valign="top">hello world</h2>

Generic attributes:

Attribute দিয়ে ওয়েবপেজ কে সম্পুর্নভাবে কাস্টমাইজ করা যায়। নিচে টেবিলে কিছু এইট্রবিউট দেয়া হল যা অনেক HTML Tag এর সাথে সহজে ব্যবহার করা যায়।
Attribute Options Function
align right, left, center সমান্তাল (Horizontally) aligns tags
valign top, middle, bottom উলম্ব(Vertically) aligns tags
bgcolor numeric, hexadecimal, RGB values Element এর  background color নিদের্শ করে।
background URL Background image উপর element নিদের্শ করে।
id ব্যবহারকারীর নির্দেশ অনুযায়ী Element  এর Name যা Cascading Style Sheets (css)   সাথে ব্যবহার করা হয়।
class ব্যবহারকারীর নির্দেশ অনুযায়ী Element  এর শ্রেনীবিন্যাস  যা Cascading Style Sheets (css) সাথে ব্যবহার করা হয়।
width Numeric Value Tables, images, or table cells এর width নির্দেশ  করে ।
height Numeric Value Tables, images, or table cells এর height  নির্দেশ  করে ।
title ব্যবহারকারীর নির্দেশ অনুযায়ী আপনার elements এর “Pop-up” title ।
Posted by at No comments:
Labels:

HTML এলিমেন্ট

ট্যাগ হল এইচটিএমএল-এর  প্রাণ যার মাধ্যমে এইচটিএমএল কোড  লেখা হয়। প্রতিটি ট্যাগ শুরু হয় বাম (<)এঙ্গেল  ব্রাকেট দিয়ে ,এরপর একটা কীওয়ার্ড এবং শেষ হয় ডান এঙ্গেল  (> ) ব্রাকেট দিয়ে।যেমনঃ <html>,<head>,<body> হল এক একটা ট্যাগ। প্রতিটা ট্যাগ আলাদা আলাদা অর্থ বহন করে অর্থাৎ প্রতিটা ট্যাগের কাজ আলাদা এবং এরা Case Sensitive নয় , তবে Small  Letter- এ লেখা ভাল। ট্যাগ লেখার একটি গুরুত্বপূর্ণ  নিয়ম হল যে ট্যাগ দিয়ে শুরু হয় সেই ট্যাগ দিয়েই শেষ করতে হবে শুধু শেষ  কীওয়ার্ড –এর পূর্বে   এর আগে একটা শ্লাস (/) দিতে হবে। যেমন- ব্যাসিক কাঠামোতে আমরা দেখেছি যে, হেড সেকশান শুরু হয়েছে <head> ট্যাগ দিয়ে আর শেষ হয়েছে </head> ট্যাগ দিয়ে।কিছু ট্যাগ রয়েছে যাদের শেষ ট্যাগ ব্যবহার না করলেও হয়, এগুলো অপশনাল ট্যাগ ।যেমনঃ কোন প্যারাগ্রাফ  লিখতে  শেষ ট্যাগ </p> ব্যবহার না করলেও হবে এটা অপশনাল ট্যাগ।
ট্যাগ এর প্রধান তিনটি অংশ আছে
ক. শুরু করার ট্যাগ(opening tag)
খ.ধারনকৃত অংশ(contents)
গ.শেষ করার ট্যাগ (closing tag)।
এইচটিএমএল ট্যাগ এর মাধ্যমে আপনি web page এ আপনার পছন্দ মত বার্তা পাঠাতে পারেন।
<html>
<title>
<body>
<p>Paragraph Tag</p>
<h2>Heading Tag</h2>
<b>Bold Tag</b>
<i>Italic Tag</i>
</body>
</title>
</html>
কিছু কিছু ট্যাগ আছে যাদের closing tag দেয়ার প্রয়োজন নেই। তারা কোন এলিমেন্ট ধারন করে না।সে ট্যাগ টি হচ্ছে line break tag এবং তা <br/> রুপে প্রকাশ করা হয়। যা বিশেষ ভাবে ব্যবহার করা হয়। অর্থাৎ একটি লাইন লেখা বাদ দিয়ে অপর লাইন হতে লেখা শুরু করার জন্য এ ট্যাগ টি ব্যবহার করা হয়।
আরো কিছু ট্যাগ আছে যাদেরকে বিশেষভাবে ব্যবহার করা হয় যেমন ইমেজ ট্যাগ, ইনপুট ট্যাগ।
<img src="rana.jpg"/>



প্রদর্শন:
Posted by at No comments:
Labels:

HTML এলিমেন্ট

ওয়েবপেজে আমরা যা কিছু দেখতে পাই সেগুলই হচ্ছে এইচটিএমএল এলিমেন্ট। ব্যনার, লিংক প্যারাগ্রাফ টেক্সট ইত্যাদিই হচ্ছে এলিমেন্ট। এইচটিএমএল এর মুল কেন্দ্রবিন্দু হচ্ছে এই এলিমেন্ট। বিভিন্ন প্রকার ট্যাগ<tag> দ্বারা এসব এলিমেন্ট তৈরি। তারা HTML page এর প্রতেকটি টেক্সটের অংশকে বর্ননা করে। এলিমেন্টস গুলো ট্যাগ(tag) এর মাধ্যমে তৈরী। HTML এলিমেন্টগুলি অনেক স্তরে বিদ্যমান। সবকিছু যা আপনার চোখের সামনে Web page এ বিদ্যমান তা হতে পারে Paragraph text, কোন ব্যনার,নেভিগেশন লিংক ইত্যাদি সব কিছুই elements এই পেজটির।
একটি এলিমেন্টের(Element) তিনটি অংশ থাকে:
১. শুরু করার ট্যাগ(opening tag). যেমন,<h1>
২. এলিমেন্ট এর ধারনকৃত অংশ। যেমন, Bangladesh
৩. শেষে বন্ধ করার ট্যাগ(closing tag)। যেমন, </h1>
যা হবে <h1> Bangladesh</h1>
আউটপুট: Bangladesh
একটি এইচটিএমএল ডকুমেন্টের  চারটি মৌলিক এলিমেন্ট থাকে- html, head, title এবং  body। এছাড়া আরও অনেক এলিমেন্ট রয়েছে।
নিম্নে এদের সংক্ষিপ্ত বর্ননা দেওয়া হল :
<html> এলিমেন্ট:
এর মাঝেই ওয়েবপেজের সব কিছু থাকবে। আমরা ওয়েবপেজের শুরুতে <html> এবং শেষে </html> লিখব।
<head> এলিমেন্ট:
এর মাঝে টাইটেল, এসইও এর keyword, Description ইত্যাদি থাকে এটি ওয়েবপেজে hide থাকে।
এটি শুরু হয় <head> দিয়ে এবং শেষ হয় </head> দিয়ে। মোট কথা Head এ যা কিছু থাকবে সব কিছু <head>……</head> এর মাঝে লিখতে হবে।
 <title> এলিমেন্ট:
আমরা ওয়েবপেজের টাইটেল বারে যে নাম দেখাতে চাই তা এখানে লিখতে হবে এটি <head> এলিমেন্ট এর মাঝে থাকবে। লিখার নিয়ম: <title> ওয়েবপেজের টাইটেল </title>
<body> এলিমেন্ট:
ওয়েবপেজে আমরা যা কিছু দেখাতে চাই তার সব কিছুই এখানে লিখতে হবে। আমরা ওয়েবপেজে যে টেক্সট, ইমেজ, লিঙ্ক প্রদর্শন করব তা <body> এলিমেন্ট এর অংশ। আমরা ওয়েবপেজে যা কিছু দেখাতে চাই তা <body>…….</body> এর মাঝে থাকবে।সবার প্রথমে HTML লেখার শুরুতে HTML শব্দের প্রথমে এবং শেষে less than  ও  greater than ( < >) চিহ্ন দিতে হয়। যেমন: <html> । কোন কিছু লেখার পর শেষে </html> ট্যাগটি দিতে হবে। অর্থাৎ <html> Welcome to Bangladesh </html>।
ব্যাপারটা ভালোভাবে বুঝার জন্য একটু আলোচনা করা যাক যেমন- কোন প্যারাগ্রাফ লিখতে প্রথমে <p> ট্যাগ দিয়ে শুরু করতে হয় তারপর প্যারাগ্রাফের বিষয়বস্তু এবং সবশেষে </p> দিয়ে শেষ করতে হয়। এখানে প্যারাগ্রাফের শুরু ও শেষ ট্যাগ (<p>Element Content</p>)নিয়েই হল প্যারাগ্রাফ এলিমেন্ট। অনেকেই ট্যাগ এবং এলিমেন্টের পার্থক্যটা বুঝতে পারে না, আসলে শুরুর ও শেষ ট্যাগ একত্রে মিলেই হল এইচটিএমএল এলিমেন্ট।
উদাহরণ,
<html>
<head>
<title>
Bangladesh
</title>
</head>
<body>
Welcome to Bangladesh. My homeland is Bangladesh. I love Bangladesh very much.
</body>
</html>
এবার পূর্বের মত, start মেনু    All Programs > Accessories >Notepad ওপেন করে উপরক্ত Program টি Notepad এ লিখে index.html নাম দিয়ে File মেনু থেকে Save এ গিয়ে Save করুন। Save করা File টি Open করে দেখুন Web Browser এ ওপেন হচ্ছে। Save করার সময় .html দিতে ভুলবেন না। নামের সাথে .html না দিলে ওয়েরপেজ তৈরি হবে না। আপনি চাইলে index এর যায়গায় অন্য নাম দিতে পারেন তবে .html টি অবশ্যই দিতে হবে। আপনি যখন আনেক গুলো ওয়েবপেজ তৈরি করে সর্ভারে আপলোড করব তখন হোম পেজটির নাম index.html নাম দিয়ে Save করতে হবে। আপনার ওয়েবপেজ তৈরি হয়ে গেছে। এতে কিভাবে টেক্সট, ইমেজ, লিঙ্ক সংয়োগ করা যাবে তা আমরা পরে আলোচনা করব।
Posted by at No comments:
Labels:
Subscribe to: Comments (Atom)