বেসিক এইস টি এম এল - Basic Html ধারণা ২০২২

লিখেছেনঃ
প্রকাশিতঃ

 বেসিক এইস টি এম এল - Basic Html ধারণা ২০২২

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

বেসিক এইস টি এম এল - Basic Html ধারণা ২০২২

বেসিক এইস টি এম এল - Basic Html ধারণা ২০২২

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

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

আজকে আমি আপনাদের Html কি ? কি ভাবে কাজ করে ? এসকল বিষয়ে আলোচনা করব না। কিন্তু আজকে আমি সরাসরি Html Tag কিভাবে ব্যবহার করবেন , সেই সকল বিষয় নিয়ে আজকের টিউন টি সাজাব।
আমি আশা করি আজকে আপনি অনেক কিছুই শিখে যাবেন।

আমি মাঝে মাঝে আমার YouTube Channel এ Video Upload করে থাকি। আপনি চাইলে আমার YouTube Channel এর সাথেও যুক্ত থেকে
অনেক কিছুই শিখে নিতে পারেন।
আমার দ্বারা পরিচালিত বিষয় গুলোর লিংক দিয়ে দিচ্ছি। আপনারা অবশ্যই যুক্ত হবেন।

  1. www.YouTube.Com/Channel/UC7JLnSaRsWEbhMQuuzd7T3w
  2. www.Facebook.Com/SMsudipBD
  3. www.Facebook.Com/Sudip.Modhusodon
  4. www.Twitter.Com/SMsudipBD
  5. www.Instagram/SMsudipBD

তো বন্ধুরা , অনেক তো বক বক করে ফেললাম। আপনি বিরক্ত হয়ে যান নি তো ? আপনাদের আর বিরক্ত করতে চাইনা।
সরাসরি আজকের টিউনে ফীরে যেতে চাই।

Lets Start Todays Tutorials

#How To Give A Link Html ? কিভাবে এইস টি এম এলে একটি লিংক দিবেন ?


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

<a href="https://SMsudipBD.Com/" title="SMsudipBD - Know For Sharing" rel="nofollow">
SMsudipBD.Com
</a>

এখানে দেখুন Html এ একটি লিংক দিয়েছি। এভাবে আপনারা যে কোন লিংক Html এ যুক্ত করতে পারেন।
যে কোন লিংকের ট্যাগ <a href=""> দিয়ে শুরু হবে এবং </a> দিয়ে শেষ হবে। এটুকু মাথায় রাখবেন।

Href এর পরে একটি লিংক দিয়েছি। যখন Html Code টি Run হবে তখন শুধু মাত্র SMsudipBD.Com এই লেখা টি দেখাবে , কেউ উক্ত SMsudipBD.Com এ ক্লিক করলে উক্ত লিংকে নিয়ে যাবে।

Title এ আপনি যা লিখে দিবেন সেটি যদি ডেস্কটপ দিয়ে কেউ ভিসিট করে , আর লিংকের উপর মাউস নিয়ে যায় তবে উক্ত লেখাটি দেখতে পারবে।

আর Rel তে লিখে দিয়েছি No Follow , এর মানে হচ্ছে যখন আমরা SEO করব। তখন Google মামার Robots.Txt উক্ত লিংক কে Reading করবে
এবং নির্দেশ গ্রহন করবে যে , উক্ত লিংক আমরা Google এ দেখাতে চাই না। তাই লিংক টি Google এ কোন ইউজার কেই Search Result এ আর দেখাবে না।
 যেমন - 

<a href="https://SMsudipBD.Com/" title="SMsudipBD - Know For Sharing" rel="follow">
SMsudipBD.Com
</a>

এবার দেখুন Rel তে লিখে দিয়েছি Follow , এর দ্বারা Google মামার Robots.Txt বুঝতে পারবে যে , আমরা উক্ত লিংক টি Google এর Search Result
এ দেখাতে চাই। তাই উক্ত লিংক টি Google Search Index এ লিংক টি যুক্ত হয়ে যাবে।

#How To Give A Image Html ? কিভাবে এইস টি এম এলে একটি ছবি দিবেন ?


ফেসবুকে সে দিন একজন আমাকে বলতেছে , জনাব একটি ইমেজ বা ছবি কিভাবে যুক্ত করব। বিষয় টি অনেকের কাছেই খুব হাস্যকর বা সহজ মনে হতে পারে কিন্তু যে নতুন তার কাছে পাহাড় সমান কঠিন।

যে ভাবে একটি ইমেজ বা ছবির ট্যাগ লিখবেন , সে রকম একটি সাধারণ ট্যাগ দিচ্ছি। একটু মনোযোগ দিয়ে লক্ষ্য করুন।
যেমন - 

<img src="https://SMsudipBD.Com/logo.png" title="Logo - SMsudipBD.Com" follow="follow" class="logo" id="logo" width="100%" height="40px">
</img>

একটি ইমেজ বা ছবির ট্যাগ <img src=""> দিয়ে শুরু হয় এবং </img> দিয়ে শেষ হয়। Src তে ইমেজ বা ছবির লিংক বসে। আর ইমেজ বা ছবি টি Customize করার জন্য অতিরিক্ত কিছু ট্যাগ ব্যবহার করা হয়।
যেমন - Title , Class/Id , Width & Height.

এ ছারাও Style Tag ব্যবহার করেও লিংক বা ইমেজ Customize করা যায়। চলুন তবে একটি উদাহরন Html Tag দেখে নেওয়া যাক।
যেমন - 

<a href="" title="" follow="follow" style="color:#000000;font-size:40px;">
SMsudipBD.Com
</a>

<img src="" title="" follow="follow" style="width:100%;height:40px;">
</img>

#How To Get Image Url ? কিভাবে ইমেজ বা ছবির লিংক বের করবেন ?

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

কিছু Option দেখতে পারবেন। উক্ত Option গুলোর মধ্যে একটি Option পেয়ে যাবেন।
Copy Image Url.
এটির উপর ক্লিক করলে ইমেজ বা ছবি টির Url কপি হয়ে যাবে। যেখানে ইমেজ বা ছবির Url এর প্রয়োজন সেখানে Paste করে দিবেন।

#How To Give Bold Text In Html ? কিভাবে এইস টি এম এলে মোটা অক্ষর দিবেন ?

অনেক ক্ষেত্রেই মোটা অক্ষর দেওয়ার প্রয়োজন পড়ে। সে ক্ষেত্রে আপনাকে নিচের Html টি ফলো করতে হবে।
যেমন - 

<b>SMsudipBD.Com</b>

#How To Give Small Text In Html ? কিভাবে এইস টি এম এলে ছোট অক্ষর দিবেন ?

অনেক ক্ষেত্রেই ছোট অক্ষর দেওয়ার প্রয়োজন পড়ে। সে ক্ষেত্রে আপনাকে নিচের Html টি ফলো করতে হবে।
যেমন - 

<small>SMsudipBD.Com</small>

#How To Give Italic Text In Html ? কিভাবে এইস টি এম এলে ইতালিক অক্ষর দিবেন ?

অনেক ক্ষেত্রেই ইতালিক অক্ষর দেওয়ার প্রয়োজন পড়ে। সে ক্ষেত্রে আপনাকে নিচের Html টি ফলো করতে হবে।
যেমন - 

<i>SMsudipBD.Com</i>

#How To Give UnderLine Text In Html ? কিভাবে এইস টি এম এলে অক্ষরের নিচে দাগ দিবেন ?

অনেক ক্ষেত্রেই অক্ষরের নিচে দাগ দেওয়ার প্রয়োজন পড়ে। সে ক্ষেত্রে আপনাকে নিচের Html টি ফলো করতে হবে।
যেমন - 

<u>SMsudipBD.Com</u>

#How To Give Colorfull Text In Html ? কিভাবে এইস টি এম এলে বিভিন্ন রঙ্গের অক্ষর দিবেন ?

অনেক ক্ষেত্রেই বিভিন্ন রঙ্গের অক্ষর দেওয়ার প্রয়োজন পড়ে। সে ক্ষেত্রে আপনাকে নিচের Html টি ফলো করতে হবে।
যেমন - 

<font color="black">SMsudipBD.Com</font>

এখানে আমি সরাসরি Color এর নাম দিয়েছি। কিন্তু যদি আপনার Color Code জানা থাকে তবে Color Code দিতেও পারবেন।
এখানে আমি জানি যে Black Color এর Color Code হচ্ছে - #000000 ।
যেমন - 

<font color="#000000">SMsudipBD.Com</font>

দুইটির কাজ একই কিন্তু আমরা ভিন্ন ভিন্ন ভাবে Html লিখতেই পারি। আপনি চাইলে আরও দুই ভাবে উক্ত Html টি লিখতে পারেন।
যেমন - 

<font style="color:#000000;">SMsudipBD.Com</font>
<div style="color:#000000;">SMsudipBD.Com</div>

তবে ওয়েব Developer রা উপরক্ত একটি উপায় ও Follow করেনা , খুব প্রয়োজন ছাড়া। বেশির ভাগ ক্ষেত্রেই Css থেকে এই কাজ টি করানো যায়।
সেটিও আপনাদের দেখাচ্ছি।
যেমন -

<div class="text-one">SMsudipBD.Com</div>
<div id="text-one">SMsudipBD.Com</div>

এখানে আমি দুইটি লাইন দেখিয়েছি। একটি Class আরেক টি Id । আমি এর আগের একটি টিউনে আপনাদের মাঝে আলোচনা করেছিলাম যে Id এবং Class কি ভাবে ব্যবহার করবেন। মূলত দুই টিরই কাজ একই।

এখন Css আপনি Head Tag Meta Style থেকেও Call করতে পারবেন অথবা Html থেকেও Call করতে পারবেন। আমি এখানে Html থেকে Call করে দেখাচ্ছি।
যেমন -

<!-- My Css Start -->
<style type="text/css">
.text-one{
color:#000000;
}
#text-one{
color:#000000;
}
</style>
<!-- My Css End -->

দেখুন আমরা ধীরে ধীরে Html এর গভীরে প্রবেশ করে ফেলেছি।
এর পরের পর্বে আমরা Css এর Basic জিনিস গুলো সম্পর্কে আলোচনা করব।

পরিশেষে আজকের টিউন আপনাদের কেমন লাগল , সেটা জানাতে ভূলবেন না। 
তাহলে আজকের টিউন এখানেই শেষ করতেছি। সকলেই ভালো ও সুস্থ থাকবেন।
টাটা।

ক্রেডিট বাইঃ- SMsudipBD.Com
Tags:-এইচ টি এম এল শেখার বই pdf,Html এর মৌলিক ট্যাগ কতটি,Html ফাইল তৈরি হয় কিভাবে,Html এর সর্বশেষ ভার্সন কোনটি,Html এর কাজ কি,কোন html tag এর ক্লোজিং ট্যাগ থাকে না,Html ট্যাগ লিস্ট,Html এর উদ্ভাবক কে ?
পোস্ট রেটিং করুন
ট্যাগঃ
About Author


টিউটোরিয়ালটি কেমন লেগেছে মন্তব্য করুন!