HTML Image

এখন আমরা দেখব একটি সাইটে কীভাবে ছবি যুক্ত করা হয়।
সাইটে ছবি সংযুক্ত করার জন্যে <img> ট্যাগ ব্যবহৃত হয়। এই ট্যাগকে এম্পটি ট্যাগ বলা হয় কারন ট্যাগটিতে এট্রিবিউট ছাড়া আর কিছু নেই। এটির ক্লোজিং ট্যাগ ও নেই।
এই ট্যাগে এট্রিবিউট হিসেবে src ব্যবহৃত হয়। src দিয়ে source কে বুঝানো হয়। src এট্রিবিউটের মাধ্যমে ইমেজের অবস্থান নির্দেশ করা হয়। এককথায় src হল ইমেজের url।
<img> ট্যাগের সাধারন সিনটেক্স হল:

<img src="url">

এবার আমরা একটি উদাহরণ দেখব।

HTML LINKS

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

HTML CSS style

এ পর্যন্ত আমরা যেটুকু আলোচনা করেছি তা হল একেবারেই বেসিক লেভেলের। কোডগুলো লিখে রান করলে দেখা যায় লেখাগুলো ব্রাউজারের বামপাশে দেখায় এবং কালো রঙের দেখায়।
বাস্তবে আমরা যে ওয়েব সাইটগুলো দেখি তাতে দেখা যায় সাইটটা অনেক সুন্দর করে সাজানো। লেখাগুলো ডানে, মাঝে বা বিভিন্ন ফরম্যাটে সাজানো। কিছু লেখা লাল, নীল , হলুদ বিভিন্ন কালারের হয়। আবার ব্যাকগ্রাউন্ড কালার করাও থাকে। এগুলো কিভাবে করা হয়?
এ কাজগুলো করার জন্যে সি এস এস-CSS ব্যবহার করা হয়। CSS এর পূর্ণাঙ্গ রুপ হল cascading style sheet.। HTML এলিমেন্টে স্টাইল প্রদান করার জন্যে এটার সৃষ্টি। সি এস এস প্রথম ব্যবহার করা হয় HTML 4.0 এর সাথে। একটা সাইটে যতগুলো পেইজ থাকে সবগুলো পেইজকে একটি কমন কমান্ড দ্বারা স্টাইলিশ্ট করার উদ্দেশ্যেই এর আবিষ্কার।
HTML এ ভিন্ন ভিন্ন ভাবে সি এস এস স্টাইল প্রয়োগ করা যায়।যেমন:

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 ব্যবহার করা হয়। নিচের উদাহরণটা লক্ষ্য করুন।