HTML ও CSS ল্যাঙ্গুয়েজ কি ? বেসিক, অ্যাট্রিবিউট, SEO ট্যাগ ও HTML ফরম্যাটিং জানুন

HTML এর পূর্ণরুপ হচ্ছে Hyper Text Markup Language এই ল্যাঙ্গুয়েজ মুলত ওয়েব পেইজ এবং ওয়েব অ্যাপ্লিকেশন তৈরিতে ব্যবহার করা হয়।

CSS এর পূণূরুপ হচ্ছে- Cascading Style Sheets. সিএসএস মুলত আধুনিক একটি ল্যাঙ্গুয়েজ যার কাজ মুলত একটি ওয়েব ডকুমেন্ট, ওয়েব সাইট এর ডিজাইন, স্টাইল, লে-আউট বা ষ্টাকচার তৈরি করতে সাহায্য করে।

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

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

এবং এইচটিএমএলএ ফরমেটিং ট্যাগ ব্যবহার করে পেইজ এর লেখাকে বিভিন্নভাবে উপস্থাপন করার উপায়গুলো উল্লেখ করা হয়েছে। যেমন লেখাকে মোটা করে দেখানো, বাঁকা করে দেখানো নানাভাবে উপস্থাপন করা যায়। এইসব মূলত ফর মিটিং এর কাজের অন্তর্ভুক্ত।

HTML ও CSS ল্যাঙ্গুয়েজ কি ? বেসিক, অ্যাট্রিবিউট, SEO ট্যাগ ও HTML ফরম্যাটিং জানুন

Html ও CSS কি এবং কেন

Html ও CSS কিভাবে শিখব

Html এ ফরম্যাটিং ট্যাগের ব্যবহার

SEO ট্যাগ

ফরমেটিং ট্যাগ কোনটি

বেসিক HTML, অ্যাট্রিবিউট

HTML (Hypertext Markup Language) এবং CSS (Cascading Style Sheets) আমরা দৈনন্দিন জীবনে যে সমস্ত কথাবার্তা বলি বা মানুষের সাথে লেনদেন করি চলাফেরা করি সেগুলো সব বাংলায় বলে থাকে। আবার ইংরেজিতেও আছে, এছাড়াও আরে আরো অনেক রকম ভাষা আছে যেগুলো ব্যবহার করে মানুষ কথোপকথন করে থাকেন। 

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

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

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

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

এইচটিএমএল হচ্ছে শক্তিশালী একটা কাঠামো বা ভিত্তি যার উপর দাঁড়িয়ে থাকবে আপনার ওয়েবসাইট। এজন্য html কে মানব দেহের কঙ্কালের সাথে তুলনা করা হয়েছে। শুধুমাত্র এইচটিএমএল দিয়ে যেকোনে লেখা লিখে পাবলিশ করা যায়। 

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

আপনি যদি নিজেকে একজন প্রফেশনাল ওয়েব ডিজাইনার হিসেবে দেখতে চান তাহলে এইচটিএমএল এবং সিএসএস কি এবং এর ব্যবহার সম্পর্কে আপনাকে অবশ্যই জানতে হবে। মনে রাখবেন এইচটিএমএল মূলত তৈরি হয়েছে ওয়েবসাইট বা ওয়েব পেজ তৈরি করার জন্য। আর এটাই হচ্ছে এর মূল কাজ।

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

এজন্য আপনাকে এইচটিএমএল এবং সিএসএস প্রোগ্রাম ভালো জানে এরকম একজনের কাছে প্রশিক্ষণ নিতে হবে। অথবা ইউটিউব থেকে ধৈর্য সহকারে ভিডিও দেখে আপনি এইচটিএমএল ও সিএসএস এর কাজ গুলি শিখে নিতে পারেন। ১৯৮০ সালে সর্বপ্রথম html এর খোঁজ করা হয়েছিল ওয়েবসাইটের ডেভেলপমেন্ট এর কাজের জন্য। 

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

ইউটিউব এর মাধ্যমে শিখুন

অনলাইনে ইন্টারনেটের সাহায্যে

ওয়েব ডিজাইনস কোর্স করুন

এইচটিএমএল টিউটোরিয়াল

Udemy মাধ্যমে অনলাইনে শিখুন

এইচটিএমএল শেখার বই এর মাধ্যমে

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

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

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

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

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

এইচ টি এম এল এর ফরমেটিং ট্যাগ বলতে ওয়েব পেজের লেখাকে বিভিন্নভাবে আকর্ষণীয় রূপে উপস্থাপন করার টেগ বোঝায়। যেমন- <i> Italic text </i> একটি ফরমেটিং ট্যাগ যা লেখাকে বাঁকা করে দেখাবে। আরেকটা হচ্ছে <b> Bold text</b> এটিও একটি ফরমেটিং ট্যাগ যা লেখাকে ভোল্ট বা মোটা করে দেখাবে। আরো কিছু ফরমেটিং ট্যাগ নিচে লিপিবদ্ধ করা হলো- <b> Bold text </b>

<strong> Important text </strong>

<i> Italic text </i>

<em> Emphasized text </em>

<mark> Marked text </mark>

<small> Small text </small>

<del> Deleted text </del>

<ins> Inserted text </ins>

_{Subscript text}

^{Superscript text}

বেসিক HTML: এইচ টি এম এল এর বিভিন্ন ট্যাগ ব্যবহারের মাধ্যমে ওয়েব পেজ তৈরি করা হয়। html এর দুটি বেসিক ট্যাগ হচ্ছে- html এবং বডি। এছাড়াও হেড এবং টাইটেল দুটি হিসেবে ব্যবহার করা হয়ে থাকে। অর্থাৎ html বেসিক বা মৌলিক ট্যাগ হচ্ছে মূলত চারটি। যথা- এইচটিএমএল ট্যাগ, টাইটেল ট্যাগ, হেড ট্যাগ, বডি ট্যাগ।

অ্যাট্রিবিউট: ট্যাগ কে সম্প্রসারিত করার জন্য অ্যাট্রিবিউট ব্যবহার করা হয়। আমি যদি একটা টেবিল তৈরি করি তবে attributes ব্যবহার করে টেবিলের প্রস্থ উচ্চতা ঠিক করতে পারে। attributes value দিয়ে টেবিলের উচ্চতা ও প্রস্থর মান নির্ণয় করতে পারি। যেমন- <tag attributes ="value" attributes ="value">, <table width="150" height="100">

একটি এনটিটির বৈশিষ্ট্য প্রকাশের জন্য যে সমস্ত আইটেম, ফিল্ড বা উপাদান ব্যবহার করা হয় তাকে অ্যাট্রিবিউট। যেমন- একজন শিক্ষার্থীর রোল নম্বর, নাম ঠিকানা ইত্যাদি হচ্ছে একটি অ্যাট্রিবিউট। অ্যাট্রিবিউট দুই প্রকার -(১) সরল অ্যাট্রিবিউট। 

যেমনঃ নাম, ঠিকানা ইত্যাদি। (২) কম্পোজিট অ্যাট্রিবিউট। যেমনঃ নামের প্রথম অংশ, শেষ অংশ, হাউজ নাম্বার, রোড নম্বর, এলাকায় ইত্যাদি।

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

আলোচনা করা হয়েছে এইচটিএমএল বেসিক, অ্যাট্রিবিউট এবং এসিও টেগো এইচটিএমএল ফরমেট কিভাবে করতে হয় কেন করতে হয়। ওয়েবসাইটের পেজ বা পোস্টকে আকর্ষণীয় করে পাঠকের কাছে উপস্থাপন করার কৌশল গুলো এখানে উল্লেখ করা হয়েছে। 

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