HTML (মার্কআপ) ও CSS (প্রোগ্রামিং) ল্যাঙ্গুয়েজ
এমন অনেকেই আছেন যারা HTML এবং CSS সম্পর্কে জানেন না।আপনারা হয়তোবা অনেক জায়গাতে HTML (মার্কআপ) ও CSS (প্রোগ্রামিং) ল্যাঙ্গুয়েজ বিষয়টি সম্পর্কে খোঁজাখুঁজি করেছেন এবং সঠিক তথ্য হয়তোবা পাননি।তাই আজকে আমার আর্টিকেলটিতে এই বিষয়টি নিয়ে বিস্তারিত আলোচনা করব।আমি আমার আর্টিকেলটিতে উপরোক্ত বিষয়টি ছাড়াও আরো ইম্পরট্যান্ট বিষয় নিয়ে আলোচনা করব।
যেমন: বেসিক HTML অ্যাট্রিবিউট এলিমেন্ট ও SEO ট্যাগ বিষয়টি নিয়ে আলোচনা করব।আশা করি আপনারা সবাই আমার এই আর্টিকেলটি সম্পূর্ণ মনোযোগ সহকারে পড়বেন।আশা করি আমার আর্টিকেলটি পড়ে আপনারা অনেক কিছু অজানা বা জানা তথ্য পেয়ে যাবেন।সম্পূর্ণ আর্টিকেলটি করার জন্য আপনাদের সকলকে অনুরোধ রইল।
ভূমিকা
আমরা হয়তোবা অনেকেই অনেক জায়গাতে HTML এবং CSS এই দুটি কথা শুনেছি।এই দুইটি আসলে প্রোগ্রামিং এর ভাষা।প্রোগ্রামিং সম্পর্কে ধারণা আনতে চাইলে আমাদের HTML এবং CSS এই দুইটি প্রোগ্রামিং এর ভাষা সম্পর্কে জানা থাকতে হবে।HTML এবং CSS এগুলো হলো সংক্ষিপ্ত রূপ।HTML এর পূর্ণরূপ হচ্ছে Hyper Text Markup Language (হাইপারটেক্সট মার্ক আপ ল্যাঙ্গুয়েজ) এবং CSS এর পূর্ণরূপ হল Caskeding Style Sheet (ক্যাসকেডিং স্টাইল শিট)।
HTML (মার্কআপ) ও CSS (প্রোগ্রামিং) ল্যাঙ্গুয়েজ
আমরা অনেকেই জানি না যে বা মানে কি, এগুলো দিয়ে কি করা হয়? আমাদের মাঝে অনেকেই আছি প্রোগ্রামিং বিষয়ে জানতে চাই বা এক্সপার্ট হতে চাই।এর জন্য সর্বপ্রথম জানা থাকতে হবে HTML এবং CSS এই দুটি প্রোগ্রামিং ল্যাঙ্গুয়েজ সম্পর্কে।HTML এবং CSS এদেরকে কম্পিউটার কোডিং এর ভাষাও বলা হয়।HTML কে মার্কআপ এবং CSS কে প্রোগ্রামিং ল্যাঙ্গুয়েজ বলা হয়।
যারা আজকে HTML এবং CSS বিষয় দুটি সম্পর্কে নতুন জানতেছেন আশা করি আমার এই আর্টিকেলটি পড়ে বুঝতে সুবিধা হবে।তাহলে চলুন এইবার জেনে নেওয়া যাক HTML মার্কআপ ও CSS প্রোগ্রামিং ল্যাঙ্গুয়েজ সম্পর্কে।আমরা অনেকেই জানি আবার অনেকেই জানিনা যে কম্পিউটারকে নির্দেশ দেওয়ার জন্য অনেকগুলো প্রোগ্রামিং ভাষা ব্যবহার করা হয়।যেগুলোকে বলা হয় কোডিং।
HTML এবং CSS ছাড়াও আরও অনেক ধরনের প্রোগ্রামিং ল্যাঙ্গুয়েজ রয়েছে সেগুলো হল: Java script, PSP।আমরা অনেকে বিভিন্ন ধরনের ওয়েবসাইট দেখেছি অথবা কেউ কেউ ওয়েবসাইট তৈরিও করে থাকি।যেকোনো ধরনের ওয়েবসাইট তৈরি করতে হলে HTML এবং CSS এই দুইটি প্রোগ্রামিং অবশ্যই প্রয়োজন।এই দুটির মধ্যে একটিকে বাদ দিলে ওয়েবসাইট তৈরি করা সম্ভব নয়।অর্থাৎ সেই ওয়েবসাইটটি অসম্পূর্ণ থেকে যায়।
আরো পড়ুন: প্লেইজারিজম কি প্লেইজারিজম বলতে কী বোঝয়
তাহলে আমরা জানতে পারলাম এই দুটির মধ্যে খুব ভালো সম্পর্ক রয়েছে।আমরা বিভিন্ন ওয়েবসাইটে বিভিন্ন ধরনের কালার বিভিন্ন ধরনের ডিজাইন দেখে থাকি।এগুলো হল CSS (প্রোগ্রামিং) এর কাজ।আর সেই ওয়েবসাইট গুলোর গঠন বা স্ট্রাকচার তৈরি করার কাজ করে HTML।সুতরাং আপনারা বুঝতেই পারছেন যে একটি ওয়েবসাইটকে তৈরি করতে হলে HTML (মার্কআপ) ও CSS (প্রোগ্রামিং) ল্যাঙ্গুয়েজ উভয়কেই প্রয়োজন।
এই দুটি প্রোগ্রামিং ভাষা ভালোভাবে শিখতে হলে সর্বপ্রথম আমাদের বেশি বেশি প্র্যাকটিস করতে হবে।এখন প্রশ্ন আসে কোথায় কিভাবে HTML এবং CSS প্র্যাকটিস করতে হয়।তার জন্য আমাদের কম্পিউটার ব্যবহার করতে হবে।যারা যারা মোবাইল দিয়ে HTML এবং CSS প্র্যাকটিস করতে চান আপনারা মোবাইল দিয়েও প্র্যাকটিস করতে পারবেন।এজন্য আমাদের দুইটি সফটওয়্যার বা অ্যাপ্লিকেশন ব্যবহার করতে হবে।
আরো পড়ুন: সকালে খালি পেটে কি খেলে ওজন বাড়ে
যে জায়গাতে আমরা কোড গুলো বা প্রোগ্রামিং ভাষাগুলো লিখব সেই সফটওয়্যারটির নাম সাবলাইন এডিটর।আর এই কোডগুলোর ফলাফল যে জায়গাতে দেখতে হবে তার নাম গুগল ক্রোম ব্রাউজার।প্রোগ্রামিং ভাষা লেখার সফটওয়্যার কে কোর্ড এডিটিং সফটওয়্যার বলা হয়।আমরা যখনই সাবলাইন এডিটরে প্রোগ্রামিং ভাষা বা কোড লিখব লেখা হয়ে গেলে প্রত্যেকবার সেটাকে সেভ করতে হবে এবং নতুন ক্রোম ব্রাউজারে গিয়ে রিফ্রেশ করতে হবে।
প্রোগ্রামিং ভাষা লেখার আগে আমাদের প্রথমে কিবোর্ড থেকে লেস দেন (<) সাইন দিতে হবে।এরপর আমাদের কিবোর্ড থেকে h টাইপ করতে হবে।তখন অটোমেটিক ভাবে একটি সাজেশনে html কথাটি চলে আসবে।তারপর কিবোর্ড থেকে ট্যাব বাটনে ক্লিক করতে হবে html সিলেক্ট থাকা অবস্থায়।তাহলে HTML ভাষায় কোড গুলো চলে আসবে কোডিং করার সময় বেশ কয়েকটি ট্যাগের সাথে পরিচিত হতে হয়।যেমন: <html> এটি কোডিং এর একটি ওপেনিং ট্যাগ।
এই ট্যাগটি দ্বারা আমাদের ব্রাউজার কে বোঝানো হয় যে আমরা HTML প্রোগ্রামিং ভাষা দ্বারা কোড তৈরি করছি।একে শুরুর ট্যাগ বলা হয়।কোডিং এর ভেতরে যেমন শুরুর ট্যাগ রয়েছে ঠিক তেমনি শেষ ট্যাগও রয়েছে।</html> এটিকে শেষ ট্যাগ বলা হয়।শেষ ট্যাগের ভেতর লেজ দেন ব্রাকেটের (<) পরে একটি স্ল্যাশ (/) চিহ্ন থাকে।এটি দেখে চেনা যায় কোনটি শেষ ট্যাগ।
কোডিংয়ের জন্য আমরা যাই লেখিনা কেন সবকিছু ট্যাগের ভেতর লিখতে হয়।কোডিং করতে হলে আরো বেশ কিছু ট্যাগ রয়েছে সেগুলো হলো:<head> (শুরু ট্যাগ), </head> (শেষ ট্যাগ), <body> (শুরু ট্যাগ), </body> (শেষ ট্যাগ)।আমরা যদি <head> ট্যাগের ভেতর কিছু লিখি তাহলে সেই লেখাটা হেডিং সেকশনে অথবা টাইটেলে দেখাবে।আর <body> ট্যাগে যদি আমরা কোন কিছু লিখি তাহলে সেটা আমাদের ব্রাউজারের বডি অংশে দেখাবে।
বেসিক HTML অ্যাট্রিবিউট এলিমেন্ট ও SEO ট্যাগ
এর আগে আমি HTML (মার্কআপ) ও CSS (প্রোগ্রামিং) ল্যাঙ্গুয়েজ সম্পর্কে আলোচনা করেছি।এখন বেসিক HTML অ্যাট্রিবিউট এলিমেন্ট ও SEO ট্যাগ নিয়ে আলোচনা করব।আমরা অনেকেই ব্লগারের ভিতরে পোস্ট লিখেছি বা লিখি।আমরা জানি ব্লগারের ভিতরে কোন একটা পোস্ট ওপেন করলে তার ওপরে পেন্সিল আইকনে ক্লিক করলে HTML মোডে যাওয়া যায়।এবার এখানে আমরা নিজের ইচ্ছামত কোডিং করতে পারব।
তবে তার আগে আজকে আমার আর্টিকেলটিতে যা যা আলোচনা করছি সেগুলো খুব ভালো করে জেনে কোডিং এর কাজ করতে হবে।আমরা যদি আমাদের ব্রাউজারে কোন কিছু প্যারাগ্রাফ আকারে লিখতে চাই তাহলে আমাদেরকে <body> ট্যাগের ভেতরে <p> (প্যারাগ্রাফ শুরু ট্যাগ) এবং </p> (প্যারাগ্রাফ শেষ ট্যাগ) নিয়ে তার ভেতরে লেখতে হবে।আমরা যদি কোন প্যারাগ্রাফে একটি লাইনের নিচ থেকে আরেকটি লাইন শুরু করতে চাই,
আরো পড়ুন: ব্যাকটেরিয়ার উপকারিতা ও অপকারিতা
তাহলে যেই লাইনটির পর থেকে লিখতে চাচ্ছি সেই লাইনের পাশে একটি স্পেস দিয়ে <br> ব্রেকট্যাগ লিখতে হবে।আর আমরা যদি একটি প্যারাগ্রাফকে দুটি প্যারাগ্রাফে পরিণত করতে চাই তাহলে কি কোডিং লেখার মাঝখানে কিবোর্ড থেকে স্পেস দিলে হবে? একদমই সেটার কোন ফলাফল আসবেনা।তার জন্য আমাদেরকে যেই লেখার পর আরেকটা প্যারাগ্রাফ শুরু করতে চাচ্ছি তার পাশে ব্রেক ট্যাগ দুইবার (<br><br>) দিতে হবে।
এই নিয়মটিতে দুটি প্যারাগ্রাফ তৈরি করা একদমই সঠিক নয়।তাহলে এখন আমাদের কি করতে হবে? প্রথম প্যারাগ্রাফ কে প্যারাগ্রাফ শুরু ট্যাগ এবং প্যারাগ্রাফ শেষ ট্যাগ দিয়ে লিখতে হবে।তারপর দ্বিতীয় প্যারাগ্রাফ কে একইভাবে প্যারাগ্রাফ শুরু ট্যাগ এবং প্যারাগ্রাফ শেষ ট্যাগ দিয়ে লিখতে হবে।চলুন একটি উদাহরণ দেওয়া যাক:
<p>My websites name is shovait.com <br>This website is about many kinds of category.</p>
<p>Welcome to my bangla blog.You can know about various types of information from my website.</p>
আমরা যদি কোন প্যারাগ্রাফ এর উপর একটি শিরোনাম বা হেডিং দিতে চাই তাহলে কি করতে হবে, জেনে নেওয়া যাক।এর জন্য আমাদের <body> বডি ট্যাগের নিচে <h> এবং </h> ট্যাগের মাঝখানে শিরোনামের কথাটি লিখতে হবে।তাহলেই একটি শিরোনাম বা হেডিং তৈরি হয়ে যাবে।আমাদের পোস্টগুলো গুগলে র্যাংক করানোর জন্য এগুলোর সঠিক ব্যবহার করা প্রয়োজন।পোস্টের ভেতরের টাইটেল গুলোকে google <h2> হিসেবে ধরে নেয়।
আর পোস্টের মেইন টাইটেল হিসেবে <h1> কে ধরা হয়।আবার পোষ্টের ভেতরের কোন সাব টাইটেলকে <h3> হিসেবে google ধরে নেয়।তাই সকল টাইটেল এর জন্য <h1> ব্যবহার করা যাবে না।কারণ গুগলের বুঝতে অসুবিধা হবে, যে কোনটা কি টাইটেল। ট্যাগের ব্যবহার সঠিক ভাবে না করলে আপনার পোস্টটি গুগলের র্যাংক করবে না।এবার আসি আমরা যদি কোন কিছুকে লিংক করতে চাই তাহলে কিভাবে করতে হয়?
কোন কিছুকে লিংক করার জন্য আমাদের প্রয়োজন এংকর ট্যাগ আমরা যেই কথাটাকে লিংক করতে সেই কথাটা কে কেটে দিতে হবে।এরপর সেখানে লিখলে সাজেশনে এঙ্কর ট্যাগ চলে আসবে।তারপর কিবোর্ড থেকে ট্যাব বাটনে ক্লিক করলে <a href=" "></a> ট্যাগটি চলে আসবে।(" ") এই চিহ্নের মাঝখানে আমাদের ওয়েব সাইটের লিংক দিতে হবে এবং (> <) এর ভেতর যে কথাটা লিংক করব সেটা দিতে হবে।
লেখক এর শেষ মন্তব্য
আজকে আমার আর্টিকেলটিতে HTML (মার্কআপ) ও CSS (প্রোগ্রামিং) ল্যাঙ্গুয়েজ এ বিষয়টি নিয়ে আলোচনা করেছি।এগুলোকে বলা হয় প্রোগ্রামিং বা কোডিং ল্যাঙ্গুয়েজ।আপনারা যারা যারা কোডিং শিখতে চাচ্ছেন আমার এই আর্টিকেলটি পড়ে কিছুটা ধারণা নিয়ে রাখতে পারেন।আশা করছি উপকৃত হবেন।আপনারা যারা যারা আমার এই আর্টিকেলটি সম্পূর্ণ পড়েছেন আপনাদের সকলকে ধন্যবাদ।আমার এই আর্টিকেলটি আপনাদের পছন্দ হলে বা ভাল লেগে থাকলে সকলের সাথে আমার এই আর্টিকেলটি শেয়ার করবেন।তাহলে সকলেই এই আর্টিকেলটি পড়ে কোডিং সম্পর্কে কিছুটা জানতে পারবে।কোডিং সম্পর্কে ধারণা রাখা আমাদের জন্য উপকারী একটি দিক।
অর্ডিনারি আইটির নীতিমালা মেনে কমেন্ট করুন। প্রতিটি কমেন্ট রিভিউ করা হয়।
comment url