HSC ICT Chaper 4 Part 3 | Introduction to Web Design and HTML Part 3

HSC ICT Chapter 4 Part 3 : HTML এর মৌলিক বিষয়সমূহ কি? | ওয়েব পেইজ তৈরির টুলস (Tools) কি কি ? | Html Tag কি? | অ্যাট্রিবিউট (Attribute) কি? | ফাঁকা ট্যাগ (Empty Tag) কি? | ধারক ট্যাগ (Container tag) কি? | HTML নকশা ও কাঠামো লে- আউট ( HTML Syntax and Layout) কি? | হেড সেকশন (Head Section) কি? | বডি সেকশন (Body Section) কি? | HTML File এর সাধারণ গঠন (Basic Structure of HTML) কি?


HTML এর মৌলিক বিষয়সমূহ কি?

একটা ওয়েব পেইজের মূলগত তৈরি করা হয় HTML দিয়ে। HTML এর পূর্ণরূপ -hypertext markup language। ১৯৯০ সালে টিম বার্নার্স লী জেনেভায় অবস্থিত CERN (European Organisation for Nuclear Research) এ কাজ করার সময় HTML আবিষ্কার করেন। এটা মূলত scripting language, কোন programming ভাষা নয়। তবে একটা ওয়েব পেইজে Text, Audio, Vedio, Graphics তথা তথ্যকে সাজাতে এবং নান্দনিকভাবে উপস্থাপন করতে HTML ব্যবহার করা হয়। সর্বশেষ ভার্সন হলো HTML 5.0। HTML কে hyper link language ও বলা হয়।

HTML এর বৈশিষ্ট্য / সুবিধা / অসুবিধাসমূহ:
  • বিশ্বব্যাপী ব্যবহার ও অধিকাংশ ব্রাউজার সাপোর্ট করে।
  • HTML এর সহজ syntax এর জন্য সহজেই শেখা ও ব্যবহার করা যায়।
  • যে কোন টেক্সট এডিটর দিয়ে কোড লেখা যায়।
  • Dybamic web page তৈরি করা যায় না।
  • ওয়েব পেইজ তৈরি কষ্ট সাধ্য।
  • অপেক্ষাকৃত কম নিরাপদ।
  • Debugging করা খুব কঠিন ও কষ্টসাধ্য।
  • HTML শিখার জন্য কোন programming জ্ঞানের দরকার হয় না।

ওয়েব পেইজ তৈরির টুলস (Tools) কি কি?

বেশ কিছু text editor আছে যা দিয়ে খুব সহজেই ওয়েব পেইজ তৈরি করা যায়।জনপ্রিয় কিছু text editor বা tools হলো -

  • নোট প্যাড++ : নোট প্যাড থেকে উন্নত সংস্করণ।
  • ড্রিম ওয়িভার : ওয়েবসাইট প্যাকেজ তৈরিতে খুবই জনপ্রিয়।
  • VS Code : বর্তমানে সবচেয়ে ভালো মানের টেক্সট এডিটর।

বর্তমানে স্মার্টফোনে অনেক অ্যাপ্লিকেশন দিয়েও ওয়েব ডিজাইন করা যায়।যেমন-

Html Tag কি?

Tag হলো কিছু keyword যা দ্বারা সুনির্দিষ্ট নির্দেশনা বোঝায়। দুইটা এঙ্গোল < > ব্র্যাকেটের মাঝে অবস্থিত এক একটি স্বতন্ত্র উপাদান (element) নিয়ে HTML tag গঠিত। আর এই tag দ্বারা HTML ডকুমেন্টের বিভিন্ন ধরনের ফরম্যাট এবং লিংক সম্পন্ন হয়ে থাকে। HTML স্ক্রিপ্টিং ভাষায় যে নিয়মাবলি ব্যবহৃত হয় তাই syntax নামে পরিচিত। Tag এর syntax বা গঠন লেখার নিয়ম -

< keyword > আর প্রতিটি tag এ opening tag এবং closing tag ব্যবহার করতে হয়।HTML এ element গুলো case independent অর্থাৎ tag লেখার সময় বড় হাতের অক্ষর (upper case) অথবা ছোট হাতের অক্ষর (lower case) অথবা উভয়ই ব্যবহার করা যেতে পারে। তবে W3C বা world wide web কনসোর্টিয়াম এর পরামর্শ হল ছোট হাতের অক্ষর ব্যবহার করা।

HTML Element(উপাদান):

Opening tag থেকে শুরু করে closing tag পর্যন্ত সকল কিছুকে HTML element বলে। Opening tag এবং closing tag এর মধ্যবর্তী সবকিছুই হল content element। সুতরাং বলা যায় তিনটি অংশ নিয়ে HTML element গঠিত। যথা-

  1. Opening tag
  2. Content element
  3. Closing tag

অ্যাট্রিবিউট (Attribute) কি?

Attribute হচ্ছে কোন কিছুর বৈশিষ্ট্য নির্ধারক নির্দেশ যা opening tag এর মধ্যে নির্দিষ্ট করে দেয়া থাকে। Attribute এ দুইটা অংশে থাকে। যথা -

  • Attribute name
  • Attribute value, (অবশ্যই উদ্ধৃতি (" ") চিহ্নের মধ্যে রাখতে হবে)।

HTML এ দুই ধরনের tag ব্যবহার করা হয়। যথা-

  1. Container tag
  2. Empty tag

ফাঁকা ট্যাগ (Empty Tag) কি?

যে সমস্ত tag এর opening tag আছে কিন্তু closing tag নেই তাদের empty tag বলে। তবে এই ট্যাগগুলো মূলত document formatting এর জন্য ব্যবহার করা হয়। যেমন - <hr>, <br> , ইত্যাদি। তবে এই ট্যাগগুলোকে অবশ্যই close করাই সঠিক নিয়ম।

ধারক ট্যাগ (Container tag) কি?

যে সমস্ত tag এর opening tag, বিষয়বস্তু ও closing tag থাকে তাদেরকে container tag বলে। এই ট্যাগগুলো ডকুমেন্ট টেক্সের formatting বা construction নির্দিষ্ট করে। যেমন -
<html>.....</html>
বেশিরভাগ container tag ই আবার অন্যান্য container tag বা empty tag কে ধারণ করতে পারে।

HTML নকশা ও কাঠামো লে- আউট ( HTML Syntax and Layout) কি?

এবারে আমরা HTML এর Structure নিয়ে আলোচনা করব। HTML দ্বারা লিখিত document টি একটি প্লেইন টেক্সট, যা দুইটা বিষয় ধারণ করে বা দুইটি অংশে ভাগ করা যায়। যথা -

  1. হেড সেকশন (Head Section)
  2. বডি সেকশন (Body Section)

হেড সেকশন (Head Section) কি?

<head> tagএর মাধ্যমে হেড সেকশনের শুরু নির্দেশ করে। <head>................</head> এর ট্যাগের মধ্যে <title>, <link>, <meta> <style>এবং <script> এর মতো গুরুত্বপূর্ণ ট্যাগগুলো রাখা হয়।

এই ট্যাগ গুলোর মাধ্যমে Browser এ ওয়েবপেইজ সম্পর্কিত বেশ কিছু তথ্য প্রদর্শনের পাশাপাশি search engine optimization (SEO) এর কাজ করা যায়।

বডি সেকশন (Body Section) কি?

<body>ট্যাগের মাধ্যমে বডি সেকশনের শুরু নির্দেশ করে।<body>...............</body> ট্যাগের মধ্যবর্তী বিষয়গুলো browser উইন্ডোতে প্রদর্শিত হয়।

HTML File এর সাধারণ গঠন (Basic Structure of HTML) কি?

HTML file document শুরু হয় <html> ট্যাগ দিয়ে এবং শেষ হয় </html> ট্যাগ নিয়ে। একটা HTML File এর সাধারন গঠন নিম্নরূপ -

  
    <html>
        <head>
           <title>......</title>
        </head>
        <body>
            ........
            ........ 
        </body>
    </html>