Saturday, June 28, 2014

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"/>
প্রদর্শন:

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 করতে হবে। আপনার ওয়েবপেজ তৈরি হয়ে গেছে। এতে কিভাবে টেক্সট, ইমেজ, লিঙ্ক সংয়োগ করা যাবে তা আমরা পরে আলোচনা করব।

HTML সূচিপত্র

যা জানবো…

এখানে ধারাবাহিক ভাবে বাংলা ভাষায় HTML এর উপর টিউটোরিয়াল লেখা হয়েছে । ডান পাশের ধারাবাহিক লিংক থেকে HTML সম্পর্কিত বিস্তারিত জ্ঞান অর্জন করা যাবে।

HTML কি?

এইচটিএমএল শেখার আগে আমারা প্রথমে জেনে নেই এইচটিএমএল টা কি? এটা থায় না মাথায় দেয়।এটা আসলে খাওয়া কিংবা মাথায় দেওয়ার জিনিস কোনটাই না। এটা মূলত একটা ল্যাংগুয়েজ মাত্র।তাই বলে কোন প্রোগ্রামিং ল্যাংগুয়েজ নয়।এটা এক ধরনের মার্কআপ ল্যাংগুয়েজ। যার পূর্ণ অর্থ Hyper Text Markup Language। । ওয়েব ডেভেলপার হতে হলে এই ল্যাংগুয়েজ টি সবার আগে ভালভাবে শিখতে হবে।তবে এটা শেখা খুব সহজ।
এটা শিখলেই আপনি মোটামুটি একটা ওয়েব পেজ তৈরী করতে পারবেন।এরপর যদি সিএসএস শেখেন তাহলে ঐ পেজটিতে আরেকটু প্রান দিতে পারবেন।এরপর জাভাস্ক্রিপ্ট ব্যবহার করলে আপনার ঐ ওয়েব পেজটি ডাইনামিক হওয়া শূরু হল। এরপর পিএইসপি,ডেটাবেস শিথলে আপনি একটি পূর্ণাঙ্গ ওয়েব পেজ তৈরী করতে পারবেন।
যে জিনিস লাগবে এইচটিএমএল শিখতে (অর্থ্যাৎ এইচটিএমএল কোড কোথায় লিখবেন) :
একটি সাধারন টেক্স্রট এডিটর, যেমন নোটপ্যাড।‌তাহলে প্রথমে নোটপ্যাড দিয়েই শুরু করা যাক কেমন।এ জন্য আপনাকে যা যা করতে হবে তা হলো-
নোটপ্যাড। Notepad open করে তৈরী হোন।যেহেতু নতুন তাই নোটপ্যাড দিয়েই শুরু করুন পরে অন্য কোন এডভান্সড এডিটরে সুইচ করবেন যেমন Netbeans বা Dreamweaver.আর যদি কারো ড্রিমওয়েভার এ কাজের অভিজ্ঞতা থাকে তাহলে  এখনই শুরু করতে পারেন।আমারা যেহেতু নতুন তাই নোটপ‌্যাড দিয়েই শুরু করি। এজন্য আপনার কম্পিউটার এ star বাটন থেকে programs এ ক্লিক করি। তার পর accessories থেকে notepad এ ক্লিক করে নোটপ্যাড ওপেন করি। এরপর টাইপ করি
এখানে উলৈখ্য যে নোটপ্যাড এর ভিতর ব্যবহৃত টেক্স্ গুলোকে এক একটি এলিমেন্টস বলা হয়। এলিমেন্টস সম্বন্ধে পরবর্তি টিউটোরিয়ালে বিস্তারিত আলোচনা করা হবে।

এভাবে লেখার পর Notepad এর ফাইল মেনু হতে save এ ক্লিক করব তারপর index.html নামে save করব। index এর জায়গায় আপনি ইচ্ছা করলে যে কোন নাম দিতে পারবেন তবে এক্সটেনেন্ট অবশ্যই (.html)সেভ দিতে হবে।যেমন,

সেভ করা ফাইলটিকে Double click করে open করবো । দেখবো যে লেখাটি Browser এ open হয়েছে। খুব সহজে একটা web Page তৈরী হয়ে গেলো।