বন্ধুরা , এখনও অনেকেই আছি , যাদের ওয়েব প্রোগ্রামিং শিখার খুবই ইচ্ছা কিন্তু সে রকম আপনাদের সুযোগ হয়ে উঠে না। আর সে কারনেই আজ আমি আপনাদের জন্য শিক্ষণীয় কিছু শেয়ার করতে চলে আসলাম।আশা করি আপনারা , আজকের টিউন খুবই মনোযোগ দিয়ে পড়বেন এবং শেষ পর্যন্ত আমার সাথেই থাকবেন।
একটি কথা মনে রাখবেন , কেউ আপনাকে শিখাবে না , যদি আপনার ইচ্ছা প্রবল হয় , তবে সেই প্রবল ইচ্ছা কে কাজে লাগিয়ে দিন।আপনি অবশ্যই সফল হবেন।
আরও পড়ুন: অন্যের কাছে CSS এর জন্য ঘুড়তে হবে না। সি এস এস ( Css ) শিখুন , আইডি ( Id ) এবং ক্লাস ( Class ) এর উপযুক্ত ব্যবহারসহ!
আজকে আমি আপনাদের Html কি ? কিভাবে কাজ করে ? এসকল বিষয়ে আলোচনা করব না। কিন্তু আজকে আমি সরাসরি Html Tag কিভাবে ব্যবহার করবেন , সেই সকল বিষয় নিয়ে আজকের টিউন টি ।আমি আশা করি আজকে আপনি অনেক কিছুই শিখে যাবেন।
How To Give A Link Html ? কি ভাবে HTML লিংক দিবেন ?
html লিংক দেওয়ার একটি ট্যাগ আমি দিয়ে দিতেছি। আপনারা ফলো করুন।
যেমন -
<a href="https://DjSohagRana.Com/" title="DjSohagRana.Com | All Bangladeshi Dj Remix" rel="nofollow">
djsohagranaCom
</a>
এখানে দেখুন Html এ একটি লিংক দিয়েছি। এভাবে আপনারা যে কোন লিংক Html এ যুক্ত করতে পারেন।
যে কোন লিংকের ট্যাগ <a href=""> দিয়ে শুরু হবে এবং </a> দিয়ে শেষ হবে। এটুকু মাথায় রাখবেন।
href এর পরে একটি লিংক দিয়েছি। যখন Html Code টি Run হবে তখন শুধু মাত্র DjSohagRana.Com | All BangladeshI Dj Remix এই লেখা টি দেখাবে , কেউ উক্ত DjSohagRana.Com |All BangladeshI Dj Remix এ ক্লিক করলে উক্ত লিংকে নিয়ে যাবে।
Title এ আপনি যা লিখে দিবেন সেটি যদি ডেস্কটপ দিয়ে কেউ ভিসিট করে , আর লিংকের উপর মাউস নিয়ে যায় তবে উক্ত লেখাটি দেখতে পারবে।
আর Rel তে লিখে দিয়েছি No Follow , এর মানে হচ্ছে যখন আমরা SEO করব। তখন Google মামার Robots.Txt উক্ত লিংক কে Reading করবে এবং নির্দেশ গ্রহন করবে যে , উক্ত লিংক আমরা Google এ দেখাতে চাই না। তাই লিংক টি Google এ কোন ইউজার কেই Search Result এ আর দেখাবে না।
যেমন -
<a href="https://djsohagrana.com/" title="DjSohagRana - Know For Sharing" rel="follow">
DjSohagRana.Com
</a>
এবার দেখুন Rel তে লিখে দিয়েছি Follow , এর দ্বারা Google Robots.Txt বুঝতে পারবে যে , আমরা উক্ত লিংক টি Google এর Search Result এ দেখাতে চাই। তাই উক্ত লিংক টি Google Search Index এ লিংক টি যুক্ত হয়ে যাবে।
How To Give A Image Html ? কিভাবে এইস টি এম এলে একটি ছবি দিবেন ?
আসলে যে নতুন তার কাছে পাহাড় সমান কঠিন। ফেসবুকে সে দিন একজন আমাকে বলতেছে , জনাব একটি ইমেজ বা ছবি কিভাবে যুক্ত করব। বিষয় টি অনেকের কাছেই খুব হাস্যকর বা সহজ মনে হতে পারে কিন্তু।
যে ভাবে একটি ইমেজ বা ছবির ট্যাগ লিখবেন , সে রকম একটি সাধারণ ট্যাগ দিচ্ছি। একটু মনোযোগ দিয়ে লক্ষ্য করুন।
যেমন -
<img src="https://your Pictures link Here" title="Logo - djSohagrana.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;">
TheSohag.Blogspot.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>DjSohagRana.Com</b>
How To Give Small Text In Html ? কিভাবে এইস টি এম এলে ছোট অক্ষর দিবেন ?
অনেক ক্ষেত্রে-ই ছোট অক্ষর দেওয়ার প্রয়োজন পড়ে। সে ক্ষেত্রে আপনাকে নিচের Html টি ফলো করতে হবে।
যেমন -
<small>DjSohagRana.Com</small>
How To Give Italic Text In Html ? কিভাবে এইস টি এম এলে ইতালিক অক্ষর দিবেন ?
অনেক ক্ষেত্রে-ই ইতালিক অক্ষর দেওয়ার প্রয়োজন পড়ে। সে ক্ষেত্রে আপনাকে নিচের Html টি ফলো করতে হবে।
যেমন -
<i>THESOHAG</i>
How To Give UnderLine Text In Html ? কিভাবে এইস টি এম এলে অক্ষরের নিচে দাগ দিবেন ?
অনেক ক্ষেত্রে-ই অক্ষরের নিচে দাগ দেওয়ার প্রয়োজন পড়ে। সে ক্ষেত্রে আপনাকে নিচের Html টি ফলো করতে হবে।
যেমন -
<u>THE SOHAG</u>
How To Give Colorfull Text In Html ? কিভাবে এইস টি এম এলে বিভিন্ন রঙ্গের অক্ষর দিবেন ?
অনেক ক্ষেত্রেই বিভিন্ন রঙ্গের অক্ষর দেওয়ার প্রয়োজন পড়ে। সে ক্ষেত্রে আপনাকে নিচের Html টি ফলো করতে হবে।
যেমন -
<font color="black">DjSohagRana.Com</font>
এখানে আমি সরাসরি Color এর নাম দিয়েছি। কিন্তু যদি আপনার Color Code জানা থাকে তবে Color Code দিতেও পারবেন।
এখানে আমি জানি যে Black Color এর Color Code হচ্ছে - #000000 ।
যেমন -
<font color="#000000">THE SOHAG</font>
দুইটির কাজ একই কিন্তু আমরা ভিন্ন ভিন্ন ভাবে Html লিখতেই পারি। আপনি চাইলে আরও দুই ভাবে উক্ত Html টি লিখতে পারেন।
যেমন -
<font style="color:#000000;">Dj Sohag Rana.Com</font>
<div style="color:#000000;">DjSohagRana.Com</div>
তবে ওয়েব Developer রা উপরক্ত একটি উপায় ও Follow করেনা , খুব প্রয়োজন ছাড়া। বেশির ভাগ ক্ষেত্রেই Css থেকে এই কাজ টি করানো যায়।
সেটিও আপনাদের দেখাচ্ছি।
যেমন -
<div class="text-one">DjSohagRana.Com</div>
<div id="text-one">DjSohagRana.Com</div>
এখানে আমি দুইটি লাইন দেখিয়েছি। একটি Class আরেক টি Id । এখন Css আপনি Head Tag Meta Style থেকেও Call করতে পারবেন অথবা Html থেকেও Call করতে পারবেন। আমি এখানে Html থেকে Call করে দেখাচ্ছি।
যেমন -
<!-- My Css Start -->
<style type="text/css">
.text-one {
color:#00000;
}
#text-one {
color:#0000;
}
</style>
<!-- My Css End -->