HTML কী??
এটাই এখন কোটি টাকার প্রশ্ন। তাহলে দেখে নেই HTML কি।
- HTML হল মার্কাপ ল্যাঙ্গুয়েজ যেটা দিয়ে ওয়েব পেজ এর কাঠামো তৈরি করা হয়।
- HTML দিয়ে বোঝায় Hyper Text Markup Language
- মার্কাপ ল্যাঙ্গুয়েজ অর্থ অনেক গুলো মার্কাপ ট্যাগ এর সমষ্টি।
- HTML ডকুমেন্ট HTML ট্যাগ এর মাধ্যমে পরিচালিত হয়।
- একেকটা HTML ট্যাগ একেক ধরনের কাজ পরিচালিত করে।
আগে একটা কোড দেখে নেই।
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
এখন এই কোড টুকু আপনার ফোনে যে HTML Editor ডাউনলোড করেছেন সেখানে লিখুন এবং সেভ করুন।
যে নামে সেভ করবেন তার শেষে .html দিবেন। এখন যেখানে সেভ করেছেন সেখানে গিয়ে আপনার ব্রাউজার দিয়ে ওই ফাইলটা ওপেন করুন। ব্যাস!!
আপনার কম্পিউটার এর নোটপ্যাড ওপেন করে লিখুন এই কোড টুকু । তারপর কোথাও সেটা একটা নাম দিয়ে সেভ করুন। তবে, যে নাম দিয়ে সেভ করবেন সেটার শেষে .html দিবেন।
এবং Save as type এ Text Documents এর জায়গায় All files করে দিবেন। এখন যেখানে সেভ করেছেন সেখানে গিয়ে সেখুন আপনার ওই ফাইলটা রয়েছে।
যদি Chrome ইন্সটল করা থাকে তাহলে দেখবেন সেটা ক্রোম এর আইকন হয়ে গেছে। যে ব্রাউজার ইন্সটল করা থাকবে সেই আইকন হয়ে যাবে। এখন সেটা আপনার ব্রাউজার এ ওপেন করুন।
কি দেখতে পাচ্ছেন টাইটেল বার এ লেখা Page Title. এবং পেজ এর ভেতর বড় করে লেখা My First Heading এবং তার নিচে লেখা ছোট করে My first paragraph.
HTML এর ব্যাখ্যাঃ–
এখানে প্রথমে লিখেছি <!DOCTYPE html> এটা দিয়ে আমি ব্রাউজার কে বুঝিয়ে দিলাম যে এটা একটা html ডকুমেন্ট। তারপর দিয়েছি <html> এটা দিয়ে বোঝালাম যে HTML শুরু হল।
তারপর দিয়েছি <head> এটা দিয়ে আমরা হেড ট্যাগ বুঝিয়েছি। এই <head> ট্যাগের মাঝে আমরা যা দেব তা ব্রাউজার এ দেখানোর জন্য না।
এটা দিয়ে আমরা ব্রাউজার এর টাইটেল দেখাবো, কোন ভাষার কন্টেন্ট তা লিখে দেবো, CSS বা JS ডিফাইন করে দেব ইত্যাদি ইত্যাদি।
তারপর দিয়েছি <title> এই টাইটেলের ভেতর আমরা আমাদের ওয়েব পেজের নাম দেই যা আসলে ব্রাউজারের টাইটেল বারে দেখায়।
</title> এটা হল ইন্ড ট্যাগ। আমরা এই ট্যাগের মাধ্যমে title ট্যাগ শেষ বুঝিয়েছি। এখন এই </head> হল ইন্ড ট্যাগ। এটা দিয়ে হেড ট্যাগ শেষ হল।
তারপর শুরু করলাম <body> ট্যাগ এটা দিয়ে আমরা ব্রাউজারের বডি ট্যাগ বোঝাচ্ছি। এর ভেতরে যা আছে সব ব্রাউজারে দেখাবে।
<h1> এটা দিয়ে হেডিং ডিফাইন করে দিয়েছি।
এবং <p> এটা হল প্যারাগ্রাফ ট্যাগ।
সব ট্যাগের ইন্ড বা শেষ ট্যাগ দিতে হয়।
ট্যাগ নেম লেখার নিয়ম হল <tagname>content</tagname> এই ট্যাগ নেমের ভেতর আমাদের প্রয়োজনীয় ট্যাগ নেম দিয়ে কন্টেন্ট এর জায়গায় কন্টেন্ট দিতে হবে।
নিচে HTML এর গঠন দেখে নেয়া যাক
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
তাহলে, এতক্ষণ বুঝলেন তো মনে হয়।
এবার দ্বিতীয় অধ্যায়ঃ– HTML Editors
আমরা তো আগেই দেখিয়েছি কিভাবে কোড রান করাতে হয়। আবার নতুন করে কি দেখাবো। সুতরাং এই অধ্যায় শেষ।
এবার তৃতীয় অধ্যায়ঃ– HTML Basics
এখানে আমরা দেখাবো HTML এর ব্যাসিক ট্যাগ গুলো।
<h1> ট্যাগ
এটাকে বলে হেডিং ট্যাগ। মোট হেডিং ট্যাগ আছে ৬ টি। একেক হেডিং ট্যাগে একেক সাইজের লেখা হয়।
চলুন দেখে নেই।
<!DOCTYPE html> <html> <body><h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>
এই কোডটুকু লিখে ব্রাউজারে চেক করুন। কি দেখতে পাচ্ছেন?? প্রথমে বড় করে লেখা তারপর আস্তে আস্তে ছোট হতে আছে।
এই হেডিং ট্যাগ দিয়ে আমরা ওয়েব পেজের হেডিং বোঝায়।
<p> ট্যাগ
এটাকে বলে প্যারাগ্রাফ ট্যাগ। এই ট্যাগের মাধ্যমে আমরা ওয়েব পেজের স্বাভাবিক লেখাগুলো দেখায়।
<!DOCTYPE html> <html> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>
<a> ট্যাগ
এটাকে বলে HTML Link ট্যাগ।
আমরা ওয়েব পেজে কোন লেখাতে যদি ক্লিক করি তাহলে নিশ্চয় দেখেছেন অন্য একটা লিংক এ চলে যায়। যেমন এই Search লেখাতে ক্লিক করুন দেখবেন আপনি গুগল সার্চ ইঞ্জিন এ চলে যাবেন। এই লিংক করার কাজ করে <a> ট্যাগ।
<!DOCTYPE html> <html> <body> <a href="https://www.yahoo.com">This is a yahoo link</a> </body> </html>
এই কোড এর <a দিয়ে বোঝালাম যে লিংক শুরু হয়েছে। তারপরে দিয়েছি href=”https://www.yahoo.com” এটা দিয়ে আমরা বুঝিয়েছি কোন লিংক এ যাবে। তারপর, > দিয়ে লিংক শেষ করলাম।
এখন আবার লিখেছি This is yahoo link । এখানে যা লিখবো সেটার সাথে লিংক হবে। অর্থাৎ এই কোডটুকু লিখে ব্রাউজারে দেখেবেন।
একটা লেখা আছে This is yahoo link এখানে ক্লিক করলেই আপনি চলে যাবেন Yahoo এর সাইটে। শেষে আমরা ইন্ড ট্যাগ দিয়ে শেষ করে দিয়েছি। মজার না বিষয়টা??
<img> ট্যাগ
আমরা তো আর ওয়েবপেজে শুধু লেখা দেখি না ছবিও দেখতে পাই। তাহলে, চলুন দেখে নেই কিভাবে ওয়েব পেজে ছবি দিতে হয়।
ওয়েব পেজে ছবি দিতে <img> ট্যাগ ব্যবহার করা হয়। নিচে একটা উদাহরণ দেখা যাকঃ-
<!DOCTYPE html> <html> <body> <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> </body> </html>
এখানে প্রথমে <img দিয়ে বুঝিয়েছি img ট্যাগ শুরু হচ্ছে।
তারপর, src=”image/w3schools.jpg” দিয়ে বুঝিয়েছি ইমেজ সোর্স বা লিংক হচ্ছে image ফোল্ডারের ভেতর w3schools.jpg নামের ইমেজ।
এখানে Image ফোল্ডার আছে সেখানে যেখানে আমাদের এই html ফাইল আছে। তারপর alt দিয়েছি কারণ কখনো যদি ইমেজ লোড না হয় বা ইমেজ না আসে তাহলে ইমেজ এর বদলে ওখানে W3Schools.com লেখা দেখাবে।
তারপর width=”104” দিয়ে বুঝিয়ে ইমেজ এর width বা প্রস্থ হবে 104 পিক্সেল এবং height=”142″ দিয়ে বলেছি যে ইমেজ এর Height বা দৈর্ঘ্য হবে ১৪২পিক্সেল। এখানে কিন্তু, কোন ইন্ড ট্যাগ দেই নি।
কারণ, ইমেজ ট্যাগের কোন ইন্ড ট্যাগ প্রয়োজন নেই।
এবারে চতুর্থ অধ্যায়ঃ— HTML Elements
HTML এ আমরা যা কিছু লিখছি সেগুলো আসলে ইলিমেন্ট এর সমষ্টি। যেমন এখানে
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
<html> এবং </html> একটা ইলিমেন্ট।
<body> এবং </body> একটা ইলিমেন্ট।
<h1> এবং </h1> একটা ইলিমেন্ট।
<p> এবং </p> একটা ইলিমেন্ট।
অর্থাৎ এখানে মোট ইলিমেন্ট আছে ৪ টি।
আরো একটা কথা। সবাই HTML এ যে ভুল টা করে তা হল ইন্ড ট্যাগ দিতে ভুলে যাওয়া। কখনো ইন্ড ট্যাগ বাদ দিবেন না।
আর, HTML এর ট্যাগ বা ইলিমেন্ট গুলো সবসময় ছোট হাতের অক্ষরে লেখার চেষ্টা করবেন।
এবারে শুরু করব ৫ম অধ্যায়ঃ– HTML Attributes
এখন আগে একটা কোড দেখব।
<!DOCTYPE html> <html> <body> <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> </body> </html>
এখানে <img ট্যাগের মাঝে ঐযে src, alt, width, height দেখছেন এগুলোকে বলে HTML Attribute. আমরা HTML ইলিমেন্ট এর বিভিন্ন কাজের জন্য Attribute ব্যবহার করি।
যেমন এখানে সাইজ, ইমেজ সোর্স ঠিক রাখতে ব্যবহার করেছি।
Title Attribute
আমরা <p> বা প্যারাগ্রাফ ট্যাগের সাথে title এট্রিবিউট ব্যবহার করতে পারি।
<!DOCTYPE html> <html> <body> <p title="About W3Schools"> W3Schools is a web developer's site. It provides tutorials and references covering many aspects of web programming, including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc. </p> <p><b> If you move the mouse over the paragraph above, the title will display as a tooltip. </b></p> </body> </html>
এখানে দেখুন আমরা <p> ট্যাগের সাথে title এট্রিবিউট ব্যবহার করেছি। কিন্তু, কথা হল তাতে লাভ হল কী?? একবার এই কোডটুকু ব্রাউজারে দেখুন। সাধারণ দেখাচ্ছে।
এখন আপনি ওই লেখাগুলোর উপর মাউস নিয়ে গিয়ে রেখে দেন দেখবেন কি হচ্ছে।
Href Attribute
এটার উদাহরণ তো দেই লিংক এর সময় দেখেছি। লিংক সেট করতে এই এট্রিবিউট ব্যবহৃত হয়।
Width and Height Attribute
এই এট্রিবিউট দিয়ে ইমেজ বা অন্য যেকোন কিছুর width এবং height ঠিক করে দেয়া যায়।
এরকম তো অনেক এট্রিবিউট আছে আমরা শিখতে শিখতে দেখবো। আর, ওই যখন আমরা একটা এট্রিবিউট এর ভ্যালু দেবো তখন সেটা কোটেশন এর ভেতর দিবেন।
যেমনঃ- width=”250″ এই ২৫০ হল ভ্যালু এবং এটাকে আমরা কোটেশন এর মাঝে দিয়েছি। না রাখলে সমস্যা নেই। কিন্তু, যদি টাইটেল এট্রিবিউট এর ভ্যালুতে একের অধিক ওয়ার্ড দেন তখন ভুল হবে যদি না কোটেশন দেন।
তাই, সব সময় কোটেশন এর ভেতর রাখবেন। এবং সবসময় ছোট হাতের অক্ষরে লিখবেন।
এখানেই শেষ করলাম “৭ দিনে শিখুন HTML” এর ১ম দিন। আজকে প্রথম তবুও অনেক কিছু শিখে ফেলেছেন।
আপনি ভাবছেন এত্ত বড় টিউটোরিয়াল কত কিছুই না আছে আসলে খুব সামান্য এখানে। আপনি ২ ঘণ্টা সময় দিলে হয়ে যাবে।
ইনশাল্লাহ, আগামী কাল যেহেতু ২য় দিন তাই ২য় দিনের টিউটোরিয়াল পাবেন।
যাওয়ার আগে একটা এক্সারসাইজ দিয়ে দেবো। যদি, পারেন তাহলে বুঝবেন আপনি এই ১ম দিনের সব ভালো মতো বুঝেছেন।
একটা সাইট বানান যেখানে টাইটেল দিবেন My First Site। তারপর, বড় করে লেখা থাকবে Welcome!! এবং তার নিচে দিবেন Visit ICT Ostad এবং ICT Ostad তে যেন ক্লিক করলে https://www.iamriaj.tk এ যায় সেই ব্যবস্থা করবেন।
এবং তার নিচে আপনার একটা ছবি দিবেন। তৈরি হয়ে গেলে Comment এ লিখবেন Done এবং আমায় মেসেজ করে পাঠিয়ে দেবেন আপনার সাইট এর ছবি ( যেহেতু কমেন্টে ছবি দেয়া যায় না)। আমি, আপনাকে ফিডব্যাক দিবো।
তাহলে আজ শেষ করলাম। একটা কথা বলি কোন সমস্যা হলে সেটা কমেন্টে বলবেন তাহলে সেই সমাধান সবাই দেখতে পারবে। মেসেজ দিলে সবাইকে আলাদা আলাদা করে উত্তর দিতে হয়।
তাই, যা বলার কমেন্টে বলবেন। খুব প্রাইভেট হলে সেক্ষেত্রে মেসেজ দিতে পারবেন। আর, এক্সারসাইজ এর কথা মনে থাকে যেন।
