HTML কী? নতুনদের জন্য বেসিক এইচটিএমএল (HTML) টিউটোরিয়াল
১. HTML এর পূর্ণরূপ ও কাজ
HTML এর পূর্ণরূপ হলো HyperText Markup Language। একটি ওয়েবসাইটের লেখা, ছবি, লিঙ্ক বা টেবিল কোথায় থাকবে, তা এইচটিএমএল ট্যাগ ব্যবহার করে নির্ধারণ করা হয়। আপনি যদি একটি দালানের কথা চিন্তা করেন, তবে এইচটিএমএল হলো সেই দালানের ইটের গাঁথুনি বা কঙ্কাল।
২. HTML ট্যাগ এবং এলিমেন্ট
এইচটিএমএল মূলত ট্যাগের সমন্বয়ে গঠিত। প্রতিটি ট্যাগ শুরু হয় <tagname> দিয়ে এবং শেষ হয় </tagname> দিয়ে। আমি নিচে কয়েকটি কমন ট্যাগ এর উদাহরণ দিচ্ছি যা আমি আমার TechSohag.com সাইটে নিয়মিত ব্যবহার করি:
৩. এইচটিএমএল ফাইলের গঠন (Structure)
<!DOCTYPE html> দিয়ে, যা ব্রাউজারকে বুঝাতে সাহায্য করে এটি একটি HTML5 ডকুমেন্ট। এরপর ক্রমান্বয়ে <html>, <head> এবং <body> ট্যাগ ব্যবহার করা হয়। আমি যখন মাস্টার সিএসএস কোড করি, তখন এই কাঠামোটি নিখুঁত রাখা অত্যন্ত জরুরি বলে মনে করি, কারণ এটি এসইও (SEO) ফ্রেন্ডলি হতে সাহায্য করে।
৪. কেন এইচটিএমএল শেখা জরুরি?
আপনি যদি কাস্টম ব্লগ ডিজাইন করতে চান বা সিএসএস (CSS) দিয়ে সাইটকে সুন্দর করতে চান, তবে আপনাকে অবশ্যই এইচটিএমএল বুঝতে হবে। এটি শেখা অত্যন্ত সহজ এবং আপনি যেকোনো সাধারণ নোটপ্যাড ব্যবহার করেই কোডিং শুরু করতে পারেন। আমি আমার অভিজ্ঞতা থেকে বলতে পারি, একবার বেসিক ট্যাগগুলো বুঝে গেলে আপনি নিজেই ছোটখাটো ওয়েব পেজ তৈরি করতে পারবেন।
৫. কীভাবে HTML এ লিঙ্ক দিবেন? (How To Give A Link)
এইচটিএমএল-এ লিঙ্ক দেওয়ার জন্য <a> বা অ্যাঙ্কর ট্যাগ ব্যবহার করা হয়। যে কোনো লিংকের ট্যাগ <a href=""> দিয়ে শুরু হবে এবং </a> দিয়ে শেষ হবে। নিচে একটি উদাহরণ দেওয়া হলো:
কোডটির বিস্তারিত ব্যাখ্যা:
rel="nofollow" দেন, তবে গুগল মামার রোবট সেই লিঙ্কটি ইনডেক্স করবে না। আর যদি rel="follow" দেন, তবে গুগল সার্চ রেজাল্টে সেই লিঙ্কটি যুক্ত হবে।৬. কীভাবে HTML এ ছবি যুক্ত করবেন? (How To Give A Image)
<img src=""> দিয়ে শুরু হয়।
ইমেজ ট্যাগের একটি উদাহরণ:
ইমেজ কাস্টমাইজ করার নিয়ম:
width="100%" দিলে ছবিটি স্ক্রিন অনুযায়ী ফিট হয়ে যাবে।৭. কীভাবে ইমেজ ইউআরএল (Image URL) বের করবেন?
যেকোনো ছবির সরাসরি লিঙ্ক বের করা খুবই সহজ। আপনি যদি মোবাইলে থাকেন, তবে ছবিটি আপলোড করার পর সেটি ওপেন করুন এবং ছবির ওপর আঙুল দিয়ে কিছুক্ষণ চেপে ধরুন। আর আপনি যদি ডেক্সটপ ইউজার হন, তবে মাউস পয়েন্টার ছবির ওপর রেখে মাউসের রাইট বাটন ক্লিক করুন।
৮. HTML টেক্সট ফরম্যাটিং (Formatting Guide)
আপনার কন্টেন্টকে আরও আকর্ষণীয় এবং গুরুত্বপূর্ণ অংশগুলো হাইলাইট করার জন্য বিভিন্ন ফরম্যাটিং ট্যাগ ব্যবহার করতে হয়। আমি নিচে কয়েকটি প্রয়োজনীয় ট্যাগের ব্যবহার প্র্যাকটিক্যাল কোডসহ দেখিয়ে দিচ্ছি:
মোটা অক্ষর (Bold Text):
লেখাকে বোল্ড বা মোটা করতে <b> ট্যাগ ব্যবহার করা হয়।
<b> DjSohagRana.Com </b> -> DjSohagRana.Com
ছোট অক্ষর (Small Text):
সাধারণ টেক্সটের চেয়ে কিছুটা ছোট আকারে লিখতে <small> ট্যাগ ব্যবহার করা হয়।
<small> DjSohagRana.Com </small> -> DjSohagRana.Com
ইতালিক বা বাঁকা অক্ষর (Italic Text):
লেখাকে স্টাইলিশ বা বাঁকা করতে <i> ট্যাগ ব্যবহার করতে হয়।
<i> THESOHAG </i> -> THESOHAG
নিচে দাগ দেওয়া (Underline Text):
অক্ষরের নিচে আন্ডারলাইন বা দাগ দেওয়ার জন্য <u> ট্যাগ ব্যবহার করা হয়।
<u> THE SOHAG </u> -> THE SOHAG
৯. কীভাবে HTML এ ছোট অক্ষর (Small Text) দিবেন?
অনেক ক্ষেত্রে সাধারণ লেখার চেয়ে কিছুটা ছোট আকারে কোনো তথ্য দেখানোর প্রয়োজন পড়ে। সে ক্ষেত্রে আপনাকে নিচের এইচটিএমএল ট্যাগটি ফলো করতে হবে। আমি যখন আমার সাইটে কপিরাইট বা অতিরিক্ত তথ্য দিই, তখন এই ট্যাগটি ব্যবহার করি।
ফলাফল: DjSohagRana.Com
১০. কীভাবে HTML এ ইতালিক অক্ষর (Italic Text) দিবেন?
কোনো লেখাকে স্টাইলিশ বা কিছুটা বাঁকা করে দেখানোর জন্য ইতালিক অক্ষর ব্যবহার করা হয়। বিশেষ করে কোনো উক্তি বা টেকনিক্যাল শব্দ হাইলাইট করতে এই ট্যাগটি চমৎকার কাজ করে। এর জন্য আপনাকে নিচের কোডটি ব্যবহার করতে হবে:
ফলাফল: THESOHAG
১১. কীভাবে HTML এ অক্ষরের নিচে দাগ (Underline Text) দিবেন?
<u> ট্যাগটি ব্যবহার করতে হবে। আমি যখন আমার TechSohag.com সাইটে কোনো পয়েন্টে জোর দিই, তখন এটি ব্যবহার করি।
ফলাফল: THE SOHAG
৪. প্রফেশনাল পদ্ধতি: CSS এর ব্যবহার
একজন ওয়েব ডেভেলপার হিসেবে আমি বলতে পারি, প্রফেশনালরা সাধারণত ওপরের পদ্ধতিগুলো ফলো করেন না। তারা CSS ব্যবহার করে কালার সেট করেন। এতে কোড ক্লিন থাকে এবং সাইট দ্রুত লোড হয়। নিচে Class এবং ID ব্যবহার করে সিএসএস কল করার নিয়ম দেখানো হলো:
<style type="text/css">
.text-one { color: #000000; }
#text-one { color: #000000; }
</style>
<!-- My Css End -->
<div class="text-one"> DjSohagRana.Com </div>
<div id="text-one"> DjSohagRana.Com </div>
পরিশেষে বলি
প্রযুক্তি এবং ওয়েব কাস্টমাইজেশন সম্পর্কে আরও জানতে নিয়মিত ভিজিট করুন TechSohag.com।