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 এর পরিচিতি লাভ করলাম এবার কর্তব্য একে আরো বেশি করে জানা যাতে একটি আন্তরিক সম্পর্ক তৈরী করা যায়। এর মৌলিক বিষয়গুলো যদি আমরা আয়ত্ত করতে পারি তবে বুঝব আমরা আমাদের গন্তব্যে ভালভাবে যাত্রা করতে পেরেছি। ভালভাবে বললাম কারন যে কোন দূরবর্তী যাত্রার শুরু হয় একটি মাত্র কদম দিয়ে।

HTML Editor

আমরা যারা কম্পিউটারের সাথে পরিচিত, কম্পিউটার ব্যবহার মোটামুটি জানি তাদের খুব ভালোভাবে জানা আছে যে প্রতিটি প্রোগ্রামের জন্য আলাদা সফটওয়্যার আছে যার মাধ্যমে ওই কাঙ্খিত প্রোগ্রাম চালানো যায়। তাই মনে প্রশ্ন আসা স্বাভাবিক যে HTML সংকেত কিভাবে লিখতে হবে? এর জন্য বিশেষ কোন সফটওয়্যার আছে কি না? যদি না থাকে তবে কিভাবে কিভাবে ডিজাইন করতে হবে? এর উত্তর হল হ্যাঁ। HTML এডিট করার জন্যে সফটওয়্যার আছে। 
  1. Adobe Dreamweaver
  2. Microsoft Expression Web
  3. Coffee Cup HTML Editor
তবে যারা নতুন তাদের জন্যে যে কোন সাধারণ টেক্সট এডিটর ব্যবহার করা ভাল। যেমন :- Notepad (PC) এবং Text Edit (Mac)। আমার বিশ্বাস HTML শেখার জন্যে সাধারণ টেক্সট এডিটর ব্যবহার করা বুদ্ধিমানের কাজ।

এবার মূল বিষয়ে আসি। কিভাবে টেক্সট এডিটর ব্যবহার করে সংকেত গুলো লেখা যায়?

HTML পরিচিতি

আমরা বুঝতে পেরেছি লেখাপড়া শিখতে হলে যেমন বর্ণমালা শেখা প্রয়োজন তেমনি ওয়েব ডিজাইন শিখতে হলেও এইচ টি এম এল শেখা প্রয়োজন। এইচ টি এম এল শেখার আগে আমাদের জানা দরকার এইচ টি এম এল কী, এটি কিভাবে কাজ করে? তো শুরু করা যাক:

HTML কী:
সহজ কথায় বলতে গেলে এইচ টি এম এল হল ওয়েব ডিজাইন বর্ণনা করার ভাষা। অর্থাৎ ওয়েব সাইটটি কেমন দেখাবে, ডিজাইন করার সময় যে ভাষায় বর্ণনা করা হয় তাই এইচ টি এম এল (HTML)।
আর একটু বিশ্লেষণ করে দেখা যাক এইচ টি এম এল কী জিনিস।
* HTML এর পূর্ণাঙ্গ রুপ হল Hyper Text Markup Language.
* HTML একটি Markup Language অর্থাৎ চিহ্নিত করার ভাষা।
* Markup Language হল এক সেট Markup Tags.
* Tag ডকুমেন্টের আলোচ্য বিষয়গুলো বর্ণনা করে।
* ডকুমেন্টে Tag এবং লেখা (plain text) থাকে।
* HTML ডকুমেন্টসকে ওয়েব পেইজ ও বলা হয়ে থাকে।
একটি উদাহরণ দিলে ব্যপারটা বুঝতে আরো সহজ হবে। নিচের কোড গুলো লক্ষ্য করুন:

ওয়েব ডিজাইন: প্রাথমিক ধারনা

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

নিশ্চয় এতক্ষনে মনের মধ্যে প্রশ্ন শুরু হয়ে গেছে কী সেই কোড