HTML পর্ব(০১) HTML পোগ্রামিং ভাষা শুরু হতে, Learn HTML A-Z । প্রযুক্তি বই।

প্রিয় পাঠক, 

এত কিছু জানার পর আমরা এখন HTML শিখতে বসেছি, HTML কেন শিখব?  HTML কি তা জানার জন্য পূর্বের পোস্ট গুলো দেখে নিবেন। ত আজকের এই পৃষ্ঠা দিয়ে HTMLশেখার একটি পর্যায় শুরু করব। আমরা HTML কে এমন ভাবে ভেঙে ভেঙে  শিখব যেন প্রতিটি  HTML এর এলিমেন্ট প্রয়োগ করতে একদম সহজ হয়। 

ত- 

HTML শুরু করার প্রথম ধাপে আমরা কি কি করব?

HTML শুরুর প্রথম দিকেই আমরা জানব কিভাবে একটি html ফাইল তৈরি করব। কম্পিউটার বা মোবাইল উভায় ডিভাইস দিয়েই আপনি HTML কোড লিখতে এবং আউটপুট পেতে পারেন।

আচ্ছা -  HTML আউটপুট বলতে কি বুঝি?

আসলে কোডিং করতে গিয়ে আমাদের দুটি পেজের সাথে পরিচিত হতে হয়। একটি হলো আমাদের Input পেজ৷ আরেকটা  আউটপুট পেজ। 

আমরা যেখানে কোড লেখব সেটা মূলত এলটি ইনপুট পেজ,  যেখানে শুধু লেখা আর লেখা থাকবে। 

আর যেখানে আমরা এই কোড গুলোর রেজাল্ট দেখতে পাব সেটি হলো আউটপুট পেজ। যা মূলত ওয়েবসাইট আকারে দেখতে পাই।

ত আমরা একটি html ফাইল তৈরি করি?

এর জন্য প্রথমেই আমরা একটি ডিভাইস পছন্দ করে নেই,  মোবাইল বা কম্পিউটার।  বুঝার সুবিধার জন্য উভয় ভাবেই দেখাচ্ছি। 

আমরা একটি ডিভাইস পছন্দ করলাম তারপর-

ধাপঃ ০১

• কম্পিউটার ইউজারঃ যারা কম্পিউটার দিয়ে করবেন তাদের জন্য ত অসাধারণ একটা সুবিধা।  তারা প্রথম অবস্থায় নোটপেড ++ ডাউনলোড করে নিবেন।
• যারা মোবাইল উজারঃ তারা গুগল প্লেস্টোর হতে যেকোনো একটি html coding অ্যাপস ডাউনলোড করে নিবেন। আমি এই এপস টি ডাউনলোড করে নিলাম।

প্রথম ধাপে এই এপ ডাউনলোড করবেন।

ধাপ ২ঃ

কম্পিউটার ইউজারঃ 

কম্পিউটারে সফটওয়্যার ইন্সটল করাটা যদিও একটু কঠিন তাই ঐ সফটওয়্যার ডাউনলোড হওয়ার পর আপনারা ডাউনলোড করা ফাইলটি খুঁজে অন্যান্য এপস এর মতোই ইন্সটল করে নিবেন। অথবা যদি অন্য কোনো কোডিং সফটওয়্যার বয়বহার করতে চান তাহল

 পছন্দ অনুযায়ী করবেন তবে নতুন অবস্থায় এটি একটি ভাল সফটওয়্যার।। 

ইন্সটল হওয়ার পর সফটওয়্যার এ প্রবেশ করবেন।এবং একটি html ফাইল তৈরি করতে নিচের চিত্রের নির্দেশনা অনুযায়ী ক্লিক করবেন।

মোবাইল ইউজারঃ 

ডাউনলোড হওয়ার পর যারা মোবাইল এপ ওপেন করবেন বা ঐ সফটওয়্যার এ প্রবেশ করবেন।

এবং একটি html ফাইল তৈরি করতে নিচের চিত্রের নির্দেশনা অনুযায়ী ক্লিক করবেন।

এর পর দেখবেন নতুন একটি উইন্ডোজ ওপেন হয়েছে।

ধাপঃ০৩

কম্পিউটার ইউজারঃ 

কম্পিউটারে ঐ ফাইল মেনুতে ক্লিক করার পর ঠিক নিচের মতো একটা পপআপ দেখতে পাবেন,  এখান হতে উপরের বাক্সে আপনাকে ফাইলের একটি নাম দিতে হবে, আর নিচের বক্সটিতে html ফরমেট ফাইল সেট করার জন্য খুঁজে Hyper Text Markup Language ফাইল সিলেক্ট করতে হবে। তারপর আপনি উপরে যেকোনো একটি ড্রাইব বা ডেস্কটপ সিলেক্ট  করে আপনার ফাইলটি  সেভ করে নিবেন।

মোবাইল ইউজারঃ 

ঐ সেভ এরোতে ক্লিক করার পর ঠিক নিচের ফটোর মতো একটা পপআপ দেখতে পাবেন। এখান হতে (.html) এর আগে একটি নাম দিয়ে আপনার যেকোনো একটি ফাইলে সিলেক্ট করে ফাইলটাকে সেভ করে নিবেন।

এই ৩ নাম্বার ধাপ অতিক্রম করার পর আমরা আমাদের সেভ করা ফাইলটি যেখানে সেভ করেছি সেখানে দেখতে পাব। 

এই হলো মূলত html ফাইল ক্রিয়েট করার পদ্ধতি। 

ওকে প্রিয় পাঠক,  আমাদের ফাইল তৈরি করা শেষ এবার আমাদের html এর ভিতরে  কোডিং শুরু করার পালা। কিন্তু এর আগে আমাদের অনেকগুলো html ট্যাগ এবং ট্যাগের ব্যবহার শিখে নিতে হবে। তাই পিরো একটি পেজ লিখতে হয়েছে এই html ট্যাগ এবং ইলিমেন্টের উপর। 

তবে এর আগে আরো কিছু মৌলিক ধারণা পেয়ে নেই। আমরা যখন ইন্টারমিডিয়েট এর ICT বইয়ে html পড়তাম তখন কিন্তু html এর বিস্তারিত পড়নি, আমরা শুধু একদম নরমাল বিষয় নিয়ে পড়েছি। এতটুকু শিখেই যদি বলেন আমি html শিখে গিয়েছি, আমি html পারি, তাহলে অনেক ভুল হবে। 

আসলে html এর ব্যবহার এতটুকু ই প্রসারিত যা আপনি কয়েক বছরে শেষ করতে পারবেন না। আমরা এতগুলোও শিখব না। শুধু আমাদের অতি প্রয়োজনীয় ইলিমেন্ট গুলোই শিখব।  

ত html এর নতুন পৃষ্ঠা শুরু করার আগে কয়েকটি ট্যাগ সম্পর্কে জেনে নেই।

আমরা যখন ছোটবেলায় "পত্রা বা দরকাস্ত লিখতাম" নিশ্চই আমরা একটি মডেল নিয়ে লিখতাম বা দরকাস্ত লেখার একটি টপম্পেট ছিল। কিভাবে দরকাস্ত লিখতে হয়। যেমন আমরা পত্র লেখার ক্ষেত্রে-  এক জায়গায় নাম দিতাম, তারপর লেখা শুরু করতাম আর একটা স্টাম্প বা ডাক টিকিট বক্স দিয়ে শেষ করতাম। ঠিক এরকম html লিখতে গেলেও কিছু নিয়ম নীতি রয়েছে।

HTML এ কয় ধরনের ট্যাগ থাকে ?

যেমন- html এ দু ধরনের ট্যাগ থাকে-

একটি হলো

•  স্টার্ট ট্যাগ বা ওপেন ট্যাগ ( <>) ,  আরেকটি-
• ক্লোজ ট্যাগ ( </> )। 

এই দু ধরণের ট্যাগ এর ভিতরে ইলিমেন্ট গুলো লিখতে হয়। 

ওপেন ট্যাগঃ

এটি দিয়ে html এর যেকোনো কোড শুরু করতে হয়। এটিকে SmallerThan এবং Biggerthan চিহ্ন দিয়ে প্রকাশ করা হয়। আর এই দু চিহ্নের মাঝে থাকে tag Name । আর ঐ ট্যাগ এর ভিতরে থাকে ইলিমেন্ট। যেমন, <html>, <h1>,  <p> ইত্যাদি। 

ক্লোজ ট্যাগ-

যে ট্যাগ দিয়ে কোনো কোড শেষ করা গয় সেটি ক্লোজ ট্যাগ।  এটিও ওপেন ট্যাগ এর মতোই। এটিকে SmallerThan এবং Biggerthan চিহ্ন এং মাঝখানে একটি  স্লেশ( /) ব্যবহার করা হয়।

ঠিক (</>)  এরকম। এই স্লেশের পরেই ট্যাগের নাম লেখা হয়।  যেমনঃ </html>, </h1>, </p> ইত্যাদি। 

এবার আমরা html ট্যাগ ব্যবহারের কিছু সতর্কতা বা যে বিষয় গুলোর প্রতি সবসময় লক্ষ্য রাখতে হবে সম্পর্কে জেনে নেই। তারপর ট্যাগ গুলো শেখা ও বর্ণনা দেখব।

যে বিষয় গুলো লক্ষ্য রাখতে হবে।

• ট্যাগ ব্যবহারের সময় যেন শুরু এবং শেষ ট্যাগ দিতে ভুল না হয়।
• প্রতিটা ক্ষমা, চিহ্ন যেন সঠিক জায়গায় বসে সেদিকে লক্ষ্য রাখতে হবে। একটি চিহ্ন যদি দিতে ভুল হয় তাহলে আউটপুট সঠিক আসবে না।
• সবসময় শৃঙ্খলা বজায় রেখে কোড লিখতে হবে।
• প্রতিটা সেকশন শুরু এবং শেষের দিকে html কমেন্ট ট্যাগ ব্যবহার করতে হবে।

আমরা আগে HTML এর মৌলিক গঠন টা জেনে নেই। তার পরের পৃষ্ঠায় ট্যাগ সমূহ এবং ব্যবহার নিয়ে আলোচনা করব।

HTML এর মৌলিক গঠনটি হলো এরকম

<html>

  

  <head>

     এখানে উপরের অংশ 

    <head>

    <body>

    এখানে সম্পূর্ণ বডি

     </body>

</html>  

---