HTML (মার্ক আপ) ও CSS (প্রোগ্রামিং) ল্যাঙ্গুয়েজ

HTML (মার্ক আপ) ও CSS (প্রোগ্রামিং) ল্যাঙ্গুয়েজ
HTML (মার্ক আপ) ও CSS (প্রোগ্রামিং) ল্যাঙ্গুয়েজ

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

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

এখন আপনাদের জানাবো কোন জিনিসটা এইচটিএমএল দিয়ে করতে পারব আর কোন জিনিসটা সিএসএস দিয়ে তৈরি করতে পারব। ধরুন আপনি একটি ভাস্কার্য তৈরি করবেন এর জন্য প্রথমে যেটা করবেন সেটি হল প্রথমে আপনাকে স্ট্রাকচার ডিজাইন করতে হবে। যেমন ভেতরে বাস রট বালি মশলাপাতি দিয়ে একটা স্ট্রাকচার তৈরি করতে হবে।

এখন আপনি যে বাস রড কিংবা অন্যান্য জিনিসপত্র আছে তাদের কে আমরা বলতে পারি html মার্কআপ ল্যাঙ্গুয়েজ। এরপর রডের উপরে যে বালি বা সিমেন্ট ব্যবহার করে স্ট্রাকচার তৈরি করাকে বলা হয় সিএসএস ল্যাঙ্গুয়েজ। আপনি শুধু html দিয়ে স্ট্রাকচার তৈরি করতে পারবেন না যদি সিএসএস ব্যবহার না করেন।

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

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

এরপর সার্চ এর ফোল্ডা এ লিখবেন file এরপর নিচে দেখবেন FILE EXPOLORER OPTIONS সেখানে ক্লিক করবেন এরপর আপনার সামনে একটা ফাইল ওপেন হবে সেই ফাইলের ভিউ এখানে চাপ দিবেন।এরপর নিচের দিকে রয়েছে HIDE EXTENSIONS FOR KNOW SILE TYPES এইটা টিক মার্ক তুলে দিবেন।এতে করে আপনার ফাইলের এক্সটেনশন শো করবে

আর যদি টিক মার্ক না দেন তাহলে এক্সটেনশন শো করবে না ফোল্ডারের নাম শো করবে। আপনি টিক মার্ক তুলে দিয়ে এপ্লাই করে ওকে করে দিবেন এরপর আমরা এইচটিএমএল ডকুমেন্ট তৈরি করব। সেজন্য মাউস বাটনের রাইট বাটন চাপ দিয়ে ভিউ অপশনে গিয়ে টেক্সট ডকুমেন্ট এ ক্লিক করে একটা নাম দিয়ে ইয়েস করতে হবে।

তাহলে দেখবেন ভাউজার ভিউ চলে এসেছে এরপর ভাউজার ধরে কোর্ট এডিটরে নিয়ে ছেড়ে দিতে হবে এরপর কোর্ট এডিটরের ভেতরে লিখতে হবে আর ব্রাউজারে চেক করতে হবে। আপনি যখন কোর্ট এডিটরে প্রোগ্রামিং ল্যাঙ্গুয়েজ লিখবেন প্রথমে আপনাকে < লেজ দেন ফাইন লিখতে হবে। এরপর যদি H চাপ দেন তাহলে আরো অনেকগুলো সাজেশন চলে আসবে।

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

প্রথমে আছে <!DOCTYPE.HTML> এর মানে হলো ভার্সন ফাইব এইটা বোঝানো হয়েছে। এখন বলব ট্যাগ শুরু হয় কিভাবে<HTML> এটা হল ওপেনিং টেক </HTML> এটা হল ক্লোজিং ট্যাগ। এদের ভিতরে যা লিখবেন সেটা টাইটেলে শো করবে আর বডির র ভিতরে যা লিখবেন সেটা শো করবে নিচে যে ফাঁকা জায়গা আছে সেখানে বডি এর ভেতরে কিছু লিখতে হলে <P> দিতে হয়।

বেসিক এইচটিএমএল অ্যাক্টিভিট অ্যাক্টিভিয়ট এলিমেন্ট ওSEO ট্যাগ পরিচিতি

বোডির ভিতরে লিখতে লিখতে যদি আলাদা প্যারাগ্রাফ করতে চান আবার নিচের লাইনে যেতে চান তাহলে ওই লেখার শেষে <BR> দিতে হবে। আবার আপনি যখন একটা প্যারাগ্রাফ থেকে আরেকটা প্যারাগ্রাফে যাবেন তখন<P> দিয়ে শুরু করতে হবে এবং</P> দিয়ে বন্ধ করতে হবে। এখন প্যারাগ্রাফের হেডিং কিভাবে তৈরি করব চলুন জেনে নেই।

সেই জন্য<P> এর উপরে<BODY> এর নিচে<H2> </H2> লিখে তার ভেতরে ভেতরে হেডিং লিখতে হবে।এখন লেখার ভেতরে কিভাবে লিংক করবেন সেজন্য সেই লেখাটা কাট করতে হবে এরপর <A HREF="" এই ডাবল কোটেশনের ভেতরে লিংক দিতে হবে এরপর যে লেখাটার উপরে লিংক করবেন সেই লেখাটা দিতে হবে তারপর</A> দিতে হবে।

এখন পোষ্টের ভিতর কিভাবে ছবি আপলোড করবেন এর জন্য প্রথমেই আপনার যেতে হবে ডেক্সটপে।ডেক্সটপে গিয়ে আপনার সেই ফাইলে যেতে হবে যে ফাইল দিয়ে লেখা চেক করেন সেইটা। সেই ফাইলের সাথে একটা ছবি রাখতে হবে এইটা অবশ্যই P ট্যাগের শেষে কিংবা শুরুতে করতে হবে। এখন ছবি কাস্টমাইস কিভাবে করবেন সেই জন্য ইমেজ ট্যাগের > এর আগে লিখতে হবে WIDTH="100%" HEIGHT="AUTO">।

এই পোস্টটি পরিচিতদের সাথে শেয়ার করুন

পূর্বের পোস্ট দেখুন পরবর্তী পোস্ট দেখুন
এই পোস্টে এখনো কেউ মন্তব্য করে নি
মন্তব্য করতে এখানে ক্লিক করুন

মারিয়া অনলাইন ব্লকের নীতিমালা মেনে কমেন্ট করুন। প্রতিটি কমেন্ট রিভিউ করা হয়।

comment url