24/08/2024
আপনারা ৭ দিনের জন্য বেসিক একটি HTML কোর্স যা ওয়েবসাইট ডিজাইন এর জন্য কাজে লাগবে। 👇👇👇
html
webdesign
& CSS Practice
HTML (Hypertext Markup Language) হলো একটি মার্কআপ ভাষা যা ওয়েব পেজ তৈরি করতে ব্যবহৃত হয়। HTML এর মাধ্যমে আমরা ওয়েব পেজের বিভিন্ন উপাদান যেমন হেডিং, প্যারাগ্রাফ, ছবি, লিঙ্ক ইত্যাদি তৈরি করতে পারি। HTML ডকুমেন্টে বিভিন্ন ট্যাগ ব্যবহার করা হয় যা ব্রাউজারকে নির্দেশ করে কীভাবে কনটেন্ট প্রদর্শন করতে হবে।
HTML এর কিছু মূল ট্যাগ:
HTML এ বেশির ভাগ ক্ষেত্রে ট্যাগ শুরু ট্যাগ এলিমেন্ট
: এটি HTML ডকুমেন্টের শুরুর এবং শেষের ট্যাগ।
: এই অংশে ডকুমেন্টের মেটাডাটা, স্টাইলশিট, স্ক্রিপ্ট ইত্যাদি যুক্ত করা হয়।
: এই ট্যাগের মধ্যে পেজের শিরোনাম লেখা হয়, যা ব্রাউজারের ট্যাবে প্রদর্শিত হয়।
: এই ট্যাগের মধ্যে ওয়েব পেজের মূল কনটেন্ট থাকে, যেমন টেক্সট, ছবি, লিঙ্ক ইত্যাদি।
থেকে : এই ট্যাগগুলি হেডিং তৈরিতে ব্যবহৃত হয়। সবচেয়ে বড় এবং সবচেয়ে ছোট।
: প্যারাগ্রাফ তৈরিতে ব্যবহৃত হয়।
: লিঙ্ক তৈরি করতে ব্যবহৃত হয়। এর href অ্যাট্রিবিউটে লিঙ্কের URL থাকে।
: ছবি প্রদর্শন করতে ব্যবহৃত হয়। এর src অ্যাট্রিবিউটে ছবির URL থাকে।
বেসিক CSS
CSS (Cascading Style Sheets) হলো একটি স্টাইলিং ভাষা যা HTML ডকুমেন্টের বিভিন্ন উপাদানের ডিজাইন ও বিন্যাস নির্ধারণ করতে ব্যবহৃত হয়। CSS ব্যবহার করে আপনি টেক্সটের রং, ফন্ট, সাইজ, লেআউট ইত্যাদি কাস্টমাইজ করতে পারেন।
CSS এর কিছু মূল উপাদান:
Selectors (সিলেক্টর): কোন HTML উপাদানগুলোতে স্টাইল প্রয়োগ হবে তা নির্ধারণ করে। যেমন: p, . দিয়ে বুঝানো হয় CSS class name, # দিয়ে বুঝায় CSS id name ইত্যাদি।
Properties (প্রোপার্টি): যেসব বৈশিষ্ট্য পরিবর্তন করতে চান। যেমন: color, font-size, background-color, height, weight, align ইত্যাদি।
Values (ভ্যালু): প্রোপার্টির মান নির্ধারণ করে। যেমন: red, 16px, , 900px, auto, left ইত্যাদি।
উদাহরন সরুপ:
1. ট্যাগ:
ট্যাগটি লিঙ্ক তৈরির জন্য ব্যবহৃত হয়। এটি হাইপারলিঙ্ক তৈরি করে, যা ব্যবহারকারীকে একটি ওয়েব পেজ থেকে অন্য পেজে বা একই পেজের অন্য স্থানে নিয়ে যায়।
: এটি একটি অ্যাট্রিবিউট যা লিঙ্কের গন্তব্য URL নির্দেশ করে।
here: এটি লিঙ্কের টেক্সট যা ব্যবহারকারী ক্লিক করবে।
যখন ব্যবহারকারী "Click here" টেক্সটে ক্লিক করবে, তখন তারা "https://example.com" ওয়েবসাইটে চলে যাবে।
2. ট্যাগ:
ট্যাগটি একটি ছবি প্রদর্শনের জন্য ব্যবহৃত হয়। এটি একটি একক ট্যাগ (self-closing tag), যার মানে এটি কোনো সমাপ্তি ট্যাগ ছাড়াই ব্যবহার করা হয়।
: এটি একটি অ্যাট্রিবিউট যা ছবির ফাইলের অবস্থান বা URL নির্দেশ করে।
: এটি ছবির বিকল্প টেক্সট নির্দেশ করে, যা সেই ক্ষেত্রে প্রদর্শিত হয় যদি ছবি লোড না হয় বা ছবিটি পাওয়া না যায়। এটি SEO এবং এক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ।
উপরের উদাহরণে, "image.jpg" নামে একটি ছবি পেজে প্রদর্শিত হবে, এবং যদি কোন কারণে ছবিটি লোড না হয়, তাহলে "Example Image" টেক্সটটি ব্যবহারকারী দেখতে পাবে।