গতকাল যে ক্লাসটি (class 1) হয়েছে তার একটি রিভিউ থাকবে এই আর্টিকেল বা লেখাটিতে।

Class recording 👉👉👉 here

1. File Extensions.
2. Text editor (VS Code) & extensions
3. Heading Tag (h1-h6)
4. Paragraph Tag ( p )
5. Image Tag (img)
6. Self Closing HTML Tags
7. Anchor Tag ( a )
8. Attributes etc

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

1.File Extensions

চলুন দেখি, আসলে এটা কি? File Extraction এটা যদি আমি সহজ ভাবে বলি তাহলে i hope আপনি বুঝে যাবেন। আমরা তো ভিডিও গান দেখি, অডিও গান শুনি তাই না, আপনারা হয় তো এই গান গুলোর শেষে mp4 বা mp3 দেখেছেন। ভিডিও গান গুলোতে mp4 এবং অডিও গানে mp3। এই যে mp4, mp3 এই গুলোকে বলা হয় extension. তেমনি আমরা যে প্রোগ্রামিং ভাষাগুলো শিখবো তাদেরও এমন কিছু extension আছে।

আপনার কম্পিউটারে যদি file extension on করা না থাকে তাহলে on করে নিন।

একটু কষ্ট করে গুগলে সার্চ করুন how to enable file extension in Windows 10 ( আপনি যেটা চালান সেটা লিখবেন )

দেখে চালু করে নিবেন।

আমাদের গত ক্লাসে HTML নিয়ে আলোচনা করা হয়েছে। HTML এর file extension হচ্ছে . html

আশা করি বুঝতে exextensions

2.Text editor (VS Code) & extensions

Text editor হচ্ছে একটি সফটওয়্যার। এটির ভিতরে আমরা সকল কোড লিখ কোড লিখবো। আমরা ওয়েবসাইট বানানোর কাজ করবো।

অনেক ধরনের code editor রয়েছে গুগলে সার্চ করলে পেয়ে যাবেন। খালিদ ভাই কোর্চটিতে Visual Studio Code ( VS Code) Editor ব্যবহার করবে। আমরাও এটা প্রিয় 🥰

আপনি এটি ইনস্টল করে না থাকলে করে নিন
ডাউনলোড লিংক 👇
https://code.visualstudio.com/download

যদি কেউ মোবাইল ব্যবহারকারী হয়ে থাকেন তাহলে এটি তাহলে এটি ডাউনলোড করে নিন
👇
https://play.google.com/store/apps/details?id=com.rhmsoft.code

মোবাইল দিয়ে কিভাবে কোড করতে হয় তা আমার এই ভিডিও গুলো দেখলে বুঝে যাবেন ইনশাআল্লাহ 👇

কেউ ভাবিয়েন না নিজের প্রোমশন করছি। না ভাই, আমি চাই আপনি শিখুন। চলুন পরের ধাপে যাই 💞

3.Heading Tag (h1-h6)

Heading Tag চলুন দেখি আসলে হেডিং ট্যাগ কি বা কেন ব্যবহার করা হয় এগুলো 🤔

আমরা তো কম বেশি সবাই কোনো না কোনো ওয়েবসাইটে ডুকেছি তাই না?

যদি কোনো নিউজ ওয়েবসাইট যেমন ( প্রথম আলো ) এই ওয়েবসাইট ডুকলে দেখবেন খবরের একটা হেডিং বা টাইলেট থাকে যা বড় করে লেখা, এরপর নিচে লেখা থাকে বিস্তারিত। এই যে খরবের টাইটেল বা হেডিং লেখা হয়েছে বড় করে, এই লেখা গুলো বানানোর জন্য বা লেখার জন্য এই Heading Tag গুলো ব্যবহার করা হয়।

তাহলে Heading Tag কি কি?

h1, h2, h3, h4, h5, h6 এই যে ৬ টা ট্যাগ দেখতে পাচ্ছেন এগুলো হচ্ছে Heading Tag।

ট্যাগ গুলো এই ভাবে লেখতে হয়

<h1>এখানে আপনি যা লিখতে চান </h1>

• <h2></h2>
• <h3></h3>
• <h4></h4>
• <h5></h5>
• <h6></h6>

এই ট্যাগ গুলো নিয়ে বিস্তারিত খালিদ ভাই গতকাল আলোচনা করেছে, দেখে নিতে পারেন।

Paragraph Tag ( p )

Paragraph Tag এটা নিয়ে তেমন কিছু বলার নেই আসলে, একটু আগে যে বললাম খবরের বিস্তারিত লেখতে হয় সেই লেখা গুলো দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়।

ট্যাগটি একটি ডাবল ট্যাগ

এই দুটির মাঝে আপনি যা খুশি লিখতে পারেন

Image Tag (img)

Image Tag দেখেই বুঝা যাচ্ছে এটির সাথে ছবির একটা সম্পর্ক রয়েছে। হ্যা আসলে তাই।

আমরা যদি ওয়েবসাইটে ছবি আনতে চাই বা শো করাতে চাই তাহলে আমাদের এই image tag টি ব্যবহার করতে হবে।

Image বা ছবি আনার জন্য আমাদের এই ট্যাগটি ব্যবহার করতে হবে

চলুন একটু ভেঙ্গে বলি

img একটি single tag বা self closing tag একটু পরে আরো বিস্তারিত জানতে পারবেন।

<img src=” ” alt=” “/ >

এই ট্যাগের ভিতরে দেখুন src নামে কিছু একটা আছে এটা হচ্ছে attribute

এখানে আমাদের বলে দিতে হবে আমাদের ছবিটি কোথায় আছে, এরপর দেখুন alt, এটার ভিতরে কিছু একটা আপনি লিখে দিতে পারেন, লিখলে কি হবে?

লিখলে..যখন কোনো কারনে ছবিটি লোড হবে না বা নেট সমস্যা করে ছবিটি ভালোভাবে আসবে না, তখন এই লেখাটি দেখাবে যেটি আপনি লিখে দিয়েছেন। আশা করি বুঝতে পেরেছেন।

Self Closing HTML Tags

Self Closing HTML tag বলতে যে ট্যাগ গুলো একা। মানে আমরা যখন h1, p এই ট্যাগগুলো দেখলাম তখন কিন্তু এমন ছিল দুইটা ট্যাগ, একটা ওপেনিং একটা ক্লোজিং

কিন্তুু img ট্যাগ টা এমন ছিল? না এমন ছিল না, এই img ট্যাগটি হচ্ছে self closing বা single tag

যেমন : 👇

• <img/>
• <br/>
• <hr/>
• <input />

এমন আরো কিছু ট্যাগ রয়েছে, গুগলে সার্চ করুন html single tag list বা self closing tag list তাহলেই পেয়ে যাবেন।

Anchor Tag ( a )

Anchor Tag বা a ট্যাগ।

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

এটি হচ্ছে Anchor tag এটির ভিতরে দেখতে পাচ্ছেন href নামে একটি অপশন দেখতে পাচ্ছেন। কোটেশনের ভিতরে যে লিংকটি দিবেন সেখানে আপনাকে নিয়ে যাবে, যেমন গুগলের লিংক দিলে গুগলে নিয়ে যাবে, ইউটিউবের দিলে ইউটিউব

Attributes

Attribute এটি হয়তো এতক্ষণে বুঝে যাওয়ার কথা। আমরা যখন img tag লিখলাম তখন src দেখলাম, alt দেখলাম, আবার a ট্যাগের ভিতরে দেখলাম href এই জিনিসগুলোই হলো attribute

আশা করি আপনারা বুঝতে পেরেছেন

চেষ্টা করবো প্রতিটি ক্লাস রিভিউ আর্টিকেল লিখতে, সবাই যে একটু সহজ ভাবে আবার বুঝে নিতে পারে

লেখার ভিতর বানান বা ভুলত্রুটি থাকলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন

Written by: মোঃ জসীম হোসাইন

Happy Programing 🥰🥰