Web Development tutorial in bangla part-4 :)
এখন আমরা জানবো যে HTML কি ?
HTML হচ্ছে কম্পিউটার ল্যাঙ্গুয়েজ। HTML এর পূর্ণ রূপ হচ্ছে Hyper Text Mark Up Language . আর HTML দিয়েই ওয়েব পেজের মূল গঠন তৈরি করা হয়। ১৯৯০ সালের NCSA কর্তৃক ডেভলপকৃত মোজাইক ব্রাউজারের মাধ্যমে HTML পরিচিতি হয়। আর HTML এর সর্বশেষ ভার্সন HTML5 যা ২০১০ সালে প্রচলিত হয়।
আর কথা না বাড়িয়ে শুরু করা যাক।
আগের ক্লাস এ দিখিয়েছি যে কিভাবে ফাইল ওপেন আর নাম দিতে হয় এবং সেই ফাইলে কি লেখে শুরু করতে হয়।
Visual studio code টি এখন open করুন।
এখন তৈরী করা (Abc.html ) এই ফাইলে (Shift +!) চাপ দিলে (Emmet abbreviations) আসবে তারপর (Enter ) চাপ দিতে হবে।
ছবিতে দেখতেই পারছেন , এই জিনিসটা কি সেই বিষয়টা নিয়ে আলোচনা করা যাক ।
১/<!DOCTYPE html>
এইটা হচ্ছে এই ফাইল টা কি ধরণের ফাইল সেটা বুঝায়। মানে এই ফাইলটা html ফাইল।
২/ <html lang="en">
এইটা হলো কি ধরণের ল্যাঙ্গুয়েজ। মানে ইংলিশ ল্যাঙ্গুয়েজে লেখা।
৩/<head>
হেডারে (title ,meta tag ,css ,javascript ,link ) এইগুলা থাকতে পারে।
হেড ট্যাগের মধ্যে যে কোনো ফাইল লিংক হিসেবে অ্যাড করা যায়। যেমন : <link rel="stylesheet" href="style.css">
হেড ট্যাগের মধ্যে link লিখলে আপনাকে suggest করবে তা থেকে link:css গিয়ে ইন্টার বাটন চাপ দিলে <link rel="stylesheet" href="style.css"> আসবে। href =" আপনার ফাইলের নাম দিবেন .(css , js) " . এই ফাইলটা যদি css , js হলে নামের শেষে ডট ( . ) দিয়ে css , js ইত্যাদি হবে। যেমন :
১/ <link rel="stylesheet" href="codewithak25.js">
২/ <link rel="stylesheet" href="codewithak25.css">
৩/ <link rel="stylesheet" href="https://codewithak25.blogspot.com/">
৪/<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
meta tag হলো কি ধরণের language এবং SEO করার জন্য এই meta tag ব্যবহার করা হয়।
৫/<title>Document</title>
এইটা হলো সবার উপরে যে ছোট image দেখছেন তার পাশে যে লেখা।
৬/</head>
সব tag লেখার পর তা close করতে হয় এইটা সেই </> close tag.
৭/<body>
</body>
এই body tag এ যা লেখা হবে তা ডিসপ্লেতে দেখা যাবে।
৮/</html>
এইবার এইটার মানে কি তা আপনারা বলেন ?
এইটা হলো html tag এর শেষ tag ...</> close tag.
আজ আমরা শর্টকাট (! Emmet abbreviations) সম্পর্কে জানলাম।
আজ আমরা আরো জানবো ---- HTML ট্যাগ কি ?
Html ট্যাগ হচ্ছে < > এই চিহ্নের মাঝে যা লেখা হয় তা এক একটি Keyword কে একত্রে বলা হয় ট্যাগ। < > এইটা হলো শুরুর ট্যাগ আর < / > এইটা হচ্ছে শেষ ট্যাগ।
এখন জানবো -----HTML Element কি?
< P >Code With ak-25 < / P > এখানে শুরু আর শেষ ট্যাগ এর মাজে যা লেখা হয়েছে তাই হলো HTML Element. এখানে Code With ak-25 হচ্ছে html element .
HTML Attributes কি?
Html এ ট্যাগের কার্যক্ষমতাকে কাজে লাগানোর জন্য শুরু tag এর মধ্যে কিছু pre-defined কথাকে লেখা হয় তাকে HTML Attribute বলে। যেমন :< font style=" font-size:50px; color:red;" > Hello w3programmers.</font>
এখানে style-এর ভিতরে যা লেখা হয়েছে তা হলো font ট্যাগের একটি এট্রিবিউট। font-size:50px দ্বারা বুঝায় লেখাটির সাইজ কেমন হবে। এবং color=”red” দ্বারা প্রকাশ করে লেখাটির রং হবে লাল।
HTML Comments কি এবং কিভাবে করা হয় ?
Html এ কোনো কিছু নোট করে রাখতে চাই কিন্তু সেই নোট ডিসপ্লেতে দেখতে চাই না। তাই সেই নোট কে comment করে রাখতে হয়। যেমনঃ
<!DOCTYPE html>
<html>
<head>
<title>HTML Comment</title>
</head>
<body>
<!--This is a paragraph-->
<p>Hello HTML!</p>
</body>
</html>
Result :
image হবে এই জায়গায়। :)
এখানে <!--This is a paragraph--> অর্থাৎ < !-- ??? --> তে ? জায়গায় যা লেখা হবে তাই comment হয়ে যাবে। কোনো কিছু comment করতে হলে সেই লেখায় ( ctrl + / ) চাপ দিতে হবে।
বা ওই লেখার আগে <!-- এবং লেখার শেষে --> দিলেই তা comment হয়ে যাবে।
আগামী ক্লাস থেকে আরো অনেক কিছু জানবো ইনশাআল্লাহ।
অনেক বক বক করলাম। যদি আমার কোথায় কারো মনে কষ্ট লেগে থাকে তাহলে আমাকে মাফ করে দিবেন। আর আমার লেখায় যদি বানান বা অন্য কিছুতে ভুল থাকে , তাহলেও আমাকে মাফ করে দিবেন প্লিজ।
আল্লাহর কাছে দোয়া করি সবাইকে যেন আল্লাহ ভালো রাখে।
পরের ক্লাস করার জন্য অনুরোধ করা হলো।
আল্লাহ হাফেজ
কোন মন্তব্য নেই
If you have any doubts, please let me know.