HTML (মার্কআপ) এবং CSS (প্রোগ্রামিং) ল্যাঙ্গুয়েজ সম্পর্কে বিস্তারিত জানুন।

HTML (মার্কআপ) এবং CSS (প্রোগ্রামিং) ল্যাঙ্গুয়েজ সম্পর্কে আমরা অনেকেই জানিনা। এগুলোর সাথে আমরা এখনও অনেকেই পরিচিত হতে পারি নাই। অনেকের কাছেই HTML এবং CSS বিষয়টি নতুন মনে হলেও এগুলো ওয়েবসাইটের জন্য ব্যপক কার্যকরী ভূমিকা পালন করে থাকে। HTML এবং CSS বিষয়ে যদি আপনি না জেনে থাকেন তাহলে অবশ্যই লেখাটি শুরু থেকে শেষ পর্যন্ত পড়ুন তাহলে এগুলো আপনার কাছে সহজ মনে হবে।

এছাড়াও আপনি আরও জানতে পারবেন যেকোন ওয়েবসাইটের জন্য HTML এবং CSS এর ব্যবহার কতটা গুরুতকপূর্ণ। আরও জানতে পারবেন HTML এবং CSS প্র্যাকটিসের নিয়ম কানুন, HTML এবং CSS এর ব্যবহার না জানলে আপনার ওয়েবসাইটে কি কি সমস্যা হতে পারে, শুরু থেকে Subline Text তৈরী করার নিয়ম, HTML তৈরী করার ডকুমেন্ট ইত্যাদি সম্পর্কে।

আমরা যারা HTML এবং CSS সম্পর্কে আগে না জেনে থাকি তাহলে তাদের সুবিধার্থে এই দুইটা বিষয় সম্পর্কে অবগত করা দরকার। আপনার যদি কোন ওয়েবসাইট থাকে আর সেই ওয়েবসাইট থেকে অনেক টাকা ইনকাম করার বা টাকা উপার্জন করার ইচ্ছা থাকে তাহলে অবশ্যই আপনাকে HTML এবং CSS ল্যাঙ্গুয়েজ সম্পর্কে ধারণা থাকতে হবে। 

আরও পড়ুনঃ ৫টি উপায় মেনে গুগল এডসেন্স থেকে ইনকাম করার পদ্ধতি জানুন।

HTML এবং CSS সম্পর্কে বিস্তারিত জানার আগে শুরুতেই এই দুইটার পূর্ণরুপ সম্পর্কে জানা দরকার।

HTML= Hyper Text Markup Language এবং

CSS= Caskeding Style Sheet.

HTML-- আমরা কথা বলা বা লেখালেখি করার জন্য বাংলা, ইংরেজী অথবা অন্যান্য ভাষা ব্যবহার করে থাকি। কিন্ত কম্পিউটারকে কমান্ড বা নির্দেশ করার জন্য অনেকগুলো প্রোগ্রামিং ল্যাঙ্গুয়েজ বা ভাষা রয়েছে যেগুলোকে আমরা কোডিং বলে থাকি। আমরা যখন কোন ওয়েবসাইট তৈরী করি বা ওয়েবসাইটে লেখালেখি করি তার সঙ্গে সংশ্লিষ্ট বেশ কিছু ওয়েবপ্রোগ্রামিং ল্যাঙ্গুয়েজ রয়েছে। 

যেমন- HTML, CSS, Java Script, PSP আরও অনেক রয়েছে। HTML এবং CSS এই দুইটা সম্পর্কে সহজ ভাবে বোঝানোর জন্য একটা উদাহরণ দেয়া যায়ঃ মনে করেন একটা ভাস্কর্য তৈরী করার জন্য রড কিংবা বাঁশ দিয়ে প্রথমে যে স্ট্রাকচার বা গঠন তৈরী করা হয় সেটাই হচ্ছে HTML। আর ঐ স্ট্রাকচারের উপর যে সিমেন্ট, বালু বা অন্যান্য ম্যাটেরিয়াল ব্যবহার করে যে ডিজাইন তৈরী করা হয় সেটাই হচ্ছে CSS। 

তাহলে নিশ্চয় বুঝতে পেরেছেন HTML এবং CSS কতটা একে অপরের পরিপূরক। এছাড়া আরও সহজভাবে বোঝানোর জন্য আরেকটা উদাহরন হলো- আমরা যদি HTML কে মানুষের কংকালের সাথে তুলনা করি তাহলে CSS হবে ঐ কংকালের চামড়া, মাংস, চুল এই জাতীয়। আমরা যারা কোন ওয়েবসাইটের মালিক বা কোন ওয়াবসাইট ব্যবহার করি, 

তারা এই বিষয়ে বুঝতে পারবো যে, ওয়েবসাইটের থিম অপশনে গিয়ে HTML এ যেসব কোড রয়েছে সেগুলোই HTML এবং CSS প্রোগ্রামিং ল্যাঙ্গুয়েজ। তাহলে নিশ্চয় বুঝতে পেরেছেন আপনার ওয়েবসাইটে HTML এবং CSS এর ব্যবহার কতটা গুরুত্বপূর্ণ।

আমাদের ওয়েবসাইটের অত্যন্ত গুরুত্বপূর্ণ কাজ হলো HTML এবং CSS প্রোগ্রামিং ল্যাঙ্গুয়েজ ব্যবহার করা। আমরা যদি HTML এবং CSS প্রোগ্রামিং এর কাজ না শিখে বা কাজ না করলে অনেক সমস্যা এবং অসুবিধা দেখা দিতে পারে। HTML কোডের কোন একটা ডট বা কোন কিছু মুছে যায় তাহলে এই পুরো কোডে আর কোন কাজ করবেনা। 

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

 

যদি না শিখে থাকেন তাহলে এই রকম ওয়েবপেজ তৈরী করতে পারবেন না। আপনি যদি আপনার ওয়েবসাইটে ভিজিটরদের বা পাঠকদের এট্রাকটিভ করতে চান এবং ওয়েবসাইট থেকে অনেক বেশি ইনকাম করতে চা তাহলে অবশ্যই আপনাকে HTML এবং CSS প্রোগ্রামিং ল্যাঙ্গুয়েজ শিখতে হবে।

আপনার ওয়েবসাইটে কোনটা কোন সেকশন হবে, লেখার ফন্ট কেমন হবে, প্রতিটি সেকশন প্যারাগ্রাপ আকারে যে ভাগ ভাগ করা রয়েছে এগুলো সব HTML এর কাজ। আর এগুলোর উপর যে ডিজাইন করা রয়েছে, লেখা ছোট-বড়, কালার সেটাপ করা এগুলো সব CSS দিয়ে কাজ করা হয়।

HTML এবং CSS যত বেশি বেশি প্র্যাকটিস করবেন তত এর সাথে সম্পর্ক তৈরী হবে এবং আপনি আপনার কাজগুলো সহজভাবে করতে পারবেন। তাই HTML এবং CSS প্রোগ্রামিং বেশি করে প্র্যাকটিস করার অভ্যাস করতে হবে। HTML এবং CSS প্র্যাকটিস করতে দুইটা জিনিস প্রয়োজন। এক--যে যায়গাতে আমরা প্রোগ্রামিং কোড বা ভাষাগুলো লিখবো সেই যায়গায় একটা সফটওয়্যার লাগবে।

আরও পড়ুনঃ গুগল কন্টেন্ট পলিসি, গেস্ট ব্লগিং, আর্টিকেল রাইটিং স্ট্র্যাটেজি সম্পর্কে জানুন।

 

দুই--ভাষাগুলো লেখা হয়ে গেলে আমরা যে এর ফলাফল দেখবো তার জন্য একটা সফটওয়্যার লাগবে। কোডের ভাষা বা বর্ণ্নাগুলো লেখার জন্য যে সফটওয়্যার লাগবে সেটা হলো কোড ইডিটর (Code Editor). Code Editor হিসেবে সাবলাইন টেক্সট (Subline Text) ব্যবহার করতে পারি আর ফলাফল দেখার জন্য যে ব্রাউজার (Browser) লাগবে সেটা হলো গুগল ক্রোম (Google Chrome)।

শুরু থেকে Subline Text তৈরী করার যে নিয়মনীতি রয়েছে তা জানতা হবে। প্রথমে Start Menu click করে সার্চ অপশনে গিয়ে ফোল্ডার (Folder) লিখতে হবে, তারপর File Explorer Option. Click করতে হবে, View Click করার পর Hide Extention এ টিক চিহ্ন উঠিয়ে দিতে হবে এবং এরপর Apply দিয়ে Ok করতে হবে।

আরও পড়ুনঃ স্ক্রিনশটস টেকনিকস-গ্রামাটিক্যাল এরর চেকার-কপিরাইটিং-প্লেইজারিজম সম্পর্কে বিস্তারিত জানুন।

প্রথমে মাউসের রাইট বাটন Right Button ক্লিক করে নিউ New অপশনে গিয়ে Text Document এ ফাইল নাম দিয়ে তারপর Enter বাটনে ক্লিক করে Yes করে দিতে হবে।

Code Editor Open করে তারপর Click করে ধরে নিয়ে স্কিনের উপর ছেড়ে দিতে হবে। এরপর Google Chrome ক্লিক করে ধরে নিয়ে এসে Subline Text এর উপর ছেড়ে দিতে হবে। Subline Text স্কিনের বামপাশে রাখতে হবে এবং Google Chrome ডান পাশে রাখতে হবে। Subline Text এ গিয়ে লিখতে হবে: <html লিখে কিবোর্ড থেকে tab button click করতে হবে। title এর মধ্যে নিজের নাম লিখতে হবে,

 

যেমন- <My name is saddam>. Body লেখা আছে তার নিচে লিখতে হবে ওয়েবসাইটের নাম। যেমন--My website name is taqwadigitalit.com. This Website is about Health and Fitness, Information and Technology. এরপর Save দিয়ে Reload করতে হবে।

শুরুতে HTML কোডের ভিতর গিয়ে যেখানে ওয়েবসাইটের নাম লেখা আছে সেই নাম Ctrl+x click করে Cut করে নিতে হবে। শুরুতেই একটা বিষয় জেনে রাখা ভালো যে লিংক করার ক্ষেত্রে HTML এর ভাষায় এটাকে Anchor বলা হয়। তাই কোডের ভিতর লিংক করার সময় Anchor এর a ব্যবহার করা হয়ে থাকে। href=< > এই এঙ্গেল ব্র্যাকেটের মধ্যে Paste করে দিতে হবে। 

" " এই দুই কোটেশনের আপনার ওয়েবসাইটের যে লিংক রয়েছে সেটা Paste করে দিতে হবে। এরপর Save দিয়ে পেজটা Refresh করতে হবে। এছাড়া শর্ট কাট কিবোর্ডে (Ctrl+S) দিয়ে Save এবং (Ctrl+R) ক্লিক করে Refresh করতে পারবেন।

ওয়েবসাইটে স্বাধারণ ভাবে ছবি আপলোড করতে আমরা অনেকেই পারি। আমরা যারা ওয়েবসাইট চালাই তারা সবাই ছবি আপলোড করতে পারি বা করে থাকি। কিন্ত HTML কোডের ভিতর ছবি আপলোড করতে আমরা অনেকেই পারিনা। যারা এর আগে দেখেন নি বা HTML কোডের ভিতর যারা ছবি আপলোড করেননি বা করতে জানেন না তাদের জন্য এই পোষ্টটি অনেক প্রয়জনীয়। 

আশা করছি মনোযোগ সহকারে লেখাটি পড়লে আপনিও আপনার ওয়েবসাইটে HTML কোডের ভিতর ছবি আপলোড করতে পারবেন। তাহলে চলুন জেনে নেওয়া যাক--শুরুতেই আপনাকে যে কাজটা করতে হবে, আপনার ল্যাপটপ কিংবা কম্পিউটারের ডেস্কটপে HTML কোড এবং একটা ছবি রাখতে হবে। এরপর HTML এর কো ডের মধ্যে যেখানে এই লেখা আছে, 

যেমন-technology guy.</P> এই লেখাটির পরে একটা স্পেস দিয়ে যায়গাটা একটু বড় করে নিতে হবে। <img লিখে কিবোর্ড থেকে tab Button click করলে এরকম একটা ইন্টারফেস চলে আসবেঃ <img.src=" " এই দুই কোটেশনের মধ্যে image name copy করে paste করে দিতে হবে। এরপর Save দিয়ে Refresh করতে হবে। কিবোর্ড শর্ট কাট (Ctrl+S) Save এবং ( Ctrl+R) Refresh.

আপনি নিশ্চয় উপোরোক্ত আলোচনার প্রেক্ষিতে জানতে পেরেছেন HTML কি, CSS কি। এছাড়াও আপনি আরও জানতে পেরেছেন HTML (মার্কআপ) এবং CSS (প্রোগ্রামিং) ল্যাঙ্গুয়েজ সম্পর্কে বিস্তারিত আলোচনা। HTML (মার্কআপ) এবং CSS (প্রোগ্রামিং) ল্যাঙ্গুয়েজ এর কাজ না করলে বা না পারলে কি কি সমস্যা বা অসুবিধা হতে পারে আপনি এই লেখাটি পড়ে জানতে পারলেন। এই লেখাটি পড়ে আপনি HTML এবং CSS প্র্যাকটিসের নিয়ম সম্পর্কে অবগত হতে পেরেছেন। 

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