HTML Text Formatting-2

আজকে আরো কিছু টেক্সট ফরম্যটিং ট্যাগ নিয়ে আলোচনা করব। এগুলোকে কম্পিউটার আউটপুট ট্যাগ বলে।
  1. <code>: এটা দিয়ে কম্পিউটার কোড টেক্সট প্রদর্শন করা হয়।
  2. <kbd>: এটা দিয়ে কী-বোর্ড টেক্সট প্রদর্শন করা হয়। 
  3. <sample>: এটা দিয়ে কম্পিউটার সেম্পল কোড প্রদর্শন করা হয়।
  4. <var>: এটা দিয়ে ভেরিয়েবল প্রকাশ করা হয়।
নিচে উদাহরণ দেয়া হল। নিজে করে দেখুন।
<!DOCTYPE html>
<html>
<body>

<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>
</body>
</html>
দ্রষ্টব্য: এই ট্যাগগুলো সচরাচর কম্পিউটার/প্রোগ্রামিং কোড প্রদর্শনের জন্যে ব্যবহৃত হয়।

HTML Text Formatting-1

একটি ওয়েব সাইটে অনেক টেক্সট থাকে। আমাদের প্রয়োজন অনুসারে লেখাগুলোকে আমরা বিভিন্ন আঙ্গিকে সাজিয়ে আমাদের সাইটকে আমরা কাঙ্ক্ষিত সৌন্দর্য প্রদান করে থাকি। তাছাড়া বিশেষ বিশেষ বিষয়কে ভিজিটরের দৃষ্টি আকর্ষন করার উদ্দেশ্যে বোল্ড করা হয়। আবার কম্পিউটার প্রোগ্রাম সম্পর্কে লিখতে গেলে কোড গুলোকে উপস্থাপন করার জন্যে বিশেষ ফন্ট ব্যবহার করতে হয়। কোন মনীষীর উক্তিকে কোটেশনের মধ্যে উপস্থাপন করতে হয়। এমনি সব কাজ করার জন্যে HTML Formatting Tag ব্যবহার করা হয়। নিচের উদাহরণটা লক্ষ্য করুন।



















HTML Paragraphs

আমরা যখন একটি ওয়েব সাইট দেখি লক্ষ্য করলে দেখা যায় সেখানে অনেক গুলো অনুচ্ছেদ আছে। এগুলো অনেক সুন্দর করে সাজানো থাকে। এই অনুচ্ছেদগুলো কিভাবে ডিজাইন করতে হয় তা ই আমরা শিখব। এইচ টি এম এল প্যারাগ্রাফকে <p> ট্যাগ দিয়ে প্রকাশ বা সংজ্ঞায়িত করা হয়। যেমন:








উপরোক্ত কোডগুলো উদাহরণ স্বরুপ দেখানো হল।

HTML Heading

গত লেসনে আমরা হেডিং ট্যাগ নিয়ে কিছুটা আলোচনা করেছিলাম, এ লেসনে বাকীটুকু আলোচনা করার আশা রাখি। আমরা গত লেসনে দেখেছিলাম কিভাবে হেডিং ট্যাগ দিতে হয়। আমরা যখন হেডিং ট্যাগ ব্যবহার করি ব্রাউজার ডিফল্ট সেটিং হিসেবে হেডিংকে পেজের বাম পাশে কোনায় দেখাবে। যদি আমরা হেডিংকে পেজের মাঝে বা ডানপাশে দেখাতে চাই তাহলে কী করতে হবে? এখানে আমাদের আর একটি বিষয়ের দিকে নজর দিতে হবে। তা হল attribute। এ সম্পর্কে আমরা আগে একটু আলোচনা করেছিলাম কিন্তু বিস্তারিত বলা হয় নি। আমরা এখন দেখব attribute কী?

Attribute: Attribute দিয়ে কোন এলিমেন্ট সম্পর্কে অতিরিক্ত তথ্য প্রদান করা হয়। অর্থাৎ কোন এলিমেন্ট ব্রাউজারে কোন পজিশনে কিভাবে প্রদর্শন করা হবে তা attribute এর মাধ্যমে ব্রাউজারকে নির্দেশ দেয়া হয়। যেমন হেডিং টা কোন পজিশনে প্রদর্শন করবে তা attribute দিয়ে নির্দেশ করা হবে। নিচে সচরাচর ব্যবহৃত attribute গুলো প্রদান করা হল।

HTML Tags

ফেসবুক ব্যবহার কারীরা ট্যাগ শব্দটির সাথে ব্যপকভাবে পরিচিত। আপনি একটি ছবি পোস্ট করলেন কিন্তু আপনার বন্ধুরা দেখছেনা বা দেখলেও কমেন্টস করছেনা । তাদের চোখে আঙুল দিয়ে দেখিয়ে দেয়ার জন্য ট্যাগ করে দিলেই হয়। এবার আর এক প্রকার ট্যাগ এর কথায় আসি। এটা হল প্রাইস ট্যাগ।  কোন পণ্যের দাম ক্রেতার দৃষ্টিগোচর করার জন্যে পণ্যের গায়ে মূল্য লেখা একধরণের কার্ড ঝোলানো থাকে, একে প্রাইস ট্যাগ বলে। ট্যাগ শব্দের বাংলা অর্থ ঝুলানো। অর্থাৎ কোন কিছু কারো দৃষ্টি গোচর করানোর উদ্দেশে বিশেষ কোন লেখা বা কার্ড চোখের সামনে ঝুলিয়ে দেয়াটাই ট্যাগ। তেমনি আমাদের তৈরী ডকুমেন্টের কোন কোন এলিমেন্ট ভিসিটরদের সামনে প্রদর্শন করা হবে তা ব্রাউজারকে ট্যাগ দিয়ে দেখিয়ে দেয়া হয়।
Tag কী: ট্যাগ হল HTML Documents এর একটি এলিমেন্টস যা ব্রাউজারে প্রদর্শন করা হবে এমন এলিমেন্টসকে নির্দেশ করে।

HTML Elements


welcome back. আপনার অবিরত আগ্রহই আজ আপনাকে এখানে নিয়ে এসেছে। কথাটা জীবনের সব ক্ষেত্রে সত্য। কোন কাজে আপনি যখন আগ্রহ হারিয়ে ফেলবেন সে কাজ আর আপনার দ্বারা কখনো শেষ করা হবে না- মনে হবে boring. আপনার কি সুনির্দিষ্ট লক্ষ্য আছে? উত্তর হ্যাঁ হলে আপনার দ্বারা সম্ভব শেষ পর্যন্ত দেখা। আর যদি না হয় তবে আপনার আগ্রহ নষ্ট হবার যথেষ্ট কারন আছে। নতুন বিষয়গুলো প্রথম প্রথম একটু কঠিনই লাগে। আবার ঠিকমত বুঝতে না পারলে বিষয়টা সমাধান করা ও অসম্ভব। তাই মাঝপথে বিদায় নেয়া স্বাভাবিক। আমি বলব একটু চেষ্টা করুন, বুঝতে অবশ্যই পারবেন। আর একবার বুঝতে শুরু করলেই কিন্তু আনলিমিটেড মজা।
মূল প্রসঙ্গে আসা যাক।

HTML এর মৌলিক ধারণা

একটি নতুন বিষয় শেখা ঠিক একজন নতুন মানুষের সাথে পরিচিত হওয়ার মত। যত মিশবেন তত আপন হবেন, তত বেশি তাকে জানবেন। যত বেশি সময় দেবেন ততই আন্তরিকতা বাড়তে থাকবে। যেহেতু এখানে আপনি আগ্রহ করে এসেছেন তাই বলা যায় এ নতুন বিষয়টা রপ্ত করার আকাঙ্খা আপনার মধ্যে প্রবলভাবে কাজ করছে। শুধু সময় নিয়ে পড়ুন এবং সাথে চর্চা চালিয়ে যান সফল হবেন। মনে রাখবেন Practice makes a man perfect. চলুন মূল বিষয়ে দৃষ্টি নিবদ্ধ করি:

HTML এর পরিচিতি লাভ করলাম এবার কর্তব্য একে আরো বেশি করে জানা যাতে একটি আন্তরিক সম্পর্ক তৈরী করা যায়। এর মৌলিক বিষয়গুলো যদি আমরা আয়ত্ত করতে পারি তবে বুঝব আমরা আমাদের গন্তব্যে ভালভাবে যাত্রা করতে পেরেছি। ভালভাবে বললাম কারন যে কোন দূরবর্তী যাত্রার শুরু হয় একটি মাত্র কদম দিয়ে।