Web Design & Development
📘 Class 2
8 টি প্রশ্ন ও উত্তর
Question #1
DOCTYPE ?
ডিক্লেয়ারেশন কোন এইচটিএমএল ডকুমেন্টের টাইপ অর্থাৎ এইচটিএমএল ডকুমেন্টটি এইচটিএমএল এর কোন সংস্করণে তৈরি টা নির্দেশ করে এবং একটি ওয়েব পেজকে সঠিকভাবে ব্রাউজারে প্রদর্শিত হতে সাহায্য করে। যে কোন একটি ওয়েব ডকুমেন্ট অর্থাৎ এইচটিএমএল ডকুমেন্টের এটিই সর্বপ্রথম ট্যাগ অর্থাৎ সকল এইচটিএমএল ট্যাগের প্রথমেই এই ট্যাগটি শুধুমাত্র একবার লিখতে হয়। এর কোন end বা closeing বা শেষ ট্যাগ নেই।
<!DOCTYPE html>
<!DOCTYPE>
এটিকে HTML ফাইলের সব শুরুতে লেখা (declare করা) হয়। এটি ডকুমেন্ট এর ধরণ প্রকাশ করে। যেমন- উপরের
<!DOCTYPE html>
নির্দেশ করে যে এটি একটি HTML ডকুমেন্ট।
এর আরেকটি কাজ আছে, HTML এর অনেকগুলো সংস্করণ আছে। সংস্করণ ভেদে HTML কোড এ পার্থক্য থাকে।
<!DOCTYPE>
দ্বারা আপনার HTML ফাইলটি কত সংস্করণকে ভিত্তি করে লেখা তা ব্রাউজারকে জানানো হয়। ফলে ব্রাউজার সহজে এবং সঠিকভাবে আপনার HTML ফাইলকে ব্রাউজারে দেখাতে পারে।
1.
<!DOCTYPE>
HTML5 কে নির্দেশ করে।
2.
<head>
....
</head>
এ দুটি tag এর ভিতর যা যা লেখা হবে তা ব্রাউজারে দেখাবে না। এ অংশে মূলত title, meta, link ইত্যাদি tag দ্বারা ডকুমেন্ট সম্পর্কিত বিষয়াবলী নির্দিষ্ট করা হয় এবং ওয়েবপেজ সম্পর্কে সব তথ্য দেয়া হয়।
Question #2
Tag কি ? Tag কত প্রকার ও কী কী ?
Tag শব্দের আভিধানিক অর্থ হল জুড়ে দেয়া।
Tag মূলত দুই প্রকার। যথাঃ–
১) এম্পটি ট্যাগ (Empty Tag)
২) কনটেইনার ট্যাগ (Container Tag)
১. এম্পটি ট্যাগ : যে সমস্ত ট্যাগের ওপেনিং বা শুরু ট্যাগ আছে কিন্তু ক্লোজিং বা শেষ ট্যাগ নেই তাকে ফাঁকা বা এম্পটি ট্যাগ বলে। এই ধরনের ট্যাগ কে self closing ট্যাগ বলে। এই ট্যাগ গুলো দুইভাবে লিখা যায়ঃ অথবা . আরও কিছু self closing ট্যাগের বেলায়ও এই কথাগুলো সত্যি, যেমন লাইন ব্রেকিং ট্যাগঃ
অথবা
, horizontal ট্যাগঃ
অথবা
etc.
২. কনটেইনার ট্যাগ : যে সমস্ত ট্যাগের ওপেনিং বা শুরু ট্যাগের বিষয়বস্তু ও ক্লোজিং বা শেষ ট্যাগ থাকে তাকে কনটেইনার বা ধারক ট্যাগ বলে। যেমনঃ html, p etc.
HTML Tag গুলোকে HTML Elements ও বলা হয় । এদের দুই ভাগে ভাগ করা হয়ে থাকেG
1.Block Elements
2. Inline Elements
HTML Block Elements
এইচটিএমএল এ যে এলিমেন্ট গুলো নতুন নতুন লাইন তৈরি করে আসে, তাদের বলা হয় ব্লক এলিমেন্ট । মানে যে এলিমেন্ট গুলোকে আপনি এইচটিএমএল কোডে পাশাপাশি বসাবেন, কিন্তু তারা নতুন নতুন লাইন তৈরি করে আসে, তাদের Block Elements বলা হয় । উদাহরন স্বরুপ div tag, p tag, section tag, h1 – h6
HTML Inline Elements
আবার কিছু এলিমেন্ট আছে, যেগুলোকে ডিফল্ট ভাবে পাশাপাশি একই লাইনে বসে । আপনি কোড এডিটর এ এদের পাশা পাশি না বসালেও দেখবেন যে এরা পাশাপাশি একই লাইনে বসছে । তো সেই এলিমেন্ট গুলোকে বলা হয় ইনলাইন এলিমেন্ট । উদাহারন স্বরুপ a tag, span tag, strong tag, q tag ….
Question #3
Attribute (অ্যাট্রিবিউট) কি এবং কিভাবে লিখতে হয় ?
ট্যাগ কে সম্প্রসারন করার জন্য এট্রিবিউট ব্যবহার করা হয়।
এইচটিএমএল এর প্রতিটি এলিমেন্ট ব্রাউজারকে এক একটা নির্দেশনা দেয় যে তার ভিতরে থাকা কনটেন্টকে কিভাবে প্রদর্শন করবে। ট্যাগ যে কাজ করে, এট্রিবিউট সে কাজকে আরো বৈশিষ্ঠায়ীত করে প্রকাশ করে। HTML এ এট্রিবিউটস ইলিমেন্ট এর আনুসাঙ্গিক তথ্য প্রকাশ করে । মূলত HTML এ ট্যাগের কার্যক্ষমতাকে বর্ধিত করার জন্য এট্রিবিউটস ব্যবহার করা হয়।
Question #4
bold tag (বোল্ড) ট্যাগ এবং strong ট্যাগ এর ব্যবহার এবং এদের মধ্যে পার্থক্য কি ?
b ট্যাগ এর কাজ
ওয়েবপেজের লেখাগুলোকে গাঢ়/মোটা করার জন্য করবার জন্য b ট্যাগ ব্যবহার হয়ে থাকে। এই এইচটিএমএল ট্যাগ টি যেকোন জায়গায় ব্যবহার করা যায়।
strong ট্যাগ এর কাজ
আমরা b ট্যাগের পরিবর্তে টেক্সট বোল্ড করবার জন্য strong ট্যাগ ও ব্যবহার করতে পারি । b এবং strong ট্যাগের কাজ একই মনে হলেও strong ট্যাগ ব্যবহারে Web Contetn গুলো SEO Friendly হয়ে থাকে । তাই strong ট্যাগ বেশি ব্যবহার হয়ে থাকে।
strong tag ও b tag এর মধ্যে পার্থক্য
এ দুটো ট্যাগ এর ফলাফল একই রকম হলেও strong tag ও b tag এর মধ্যে বড় পার্থক্য হল SEO Factor. b tag টেক্সট কে শুধু বোল্ড বা গাঢ়ই করে কিন্তু strong tag টেক্সট গাঢ় করার পাশাপাশি Search Engine কে একটি মেসেজ দেয় যে, যে টেক্সট টি strong tag এর ভিতরে আছে সেটি গুরুত্বপূর্ণ টেক্সট
Question #5
italic tag (ইটালিক) ট্যাগ কি, i ট্যাগের কাজ কি ?
i ট্যাগ ব্যবহার করে যেকোন লেখাকে বাকা করা যায়। অর্থাৎ i ট্যাগ ব্যবহার করলে text গুলো কিছুটা বাকা হয়ে যায়
Question #6
anchor tag (অ্যাঙ্কর) ট্যাগ কি, a ট্যাগের কাজ কি ?
anchor tag বা a ট্যাগ
anchor শব্দটির a বর্ন নিয়ে a ট্যাগের নামকরণ করা হয়েছে। anchor শব্দের অর্থ নোঙ্গর। নৌকা বেঁধে রাখার একটি লোহার যন্ত্রকে নোঙ্গর বলে।
নৌকা যেখানেই থাক, বাতাস যেদিকেই বইতে থাক, স্রোত যেদিকেই থাক নৌকা কিন্তু আটকা পড়ে থাকে যেখানে নোঙ্গর আছে সেখানে। একইভাবে anchor ট্যাগ এর মাঝে href নামে একটি এট্রিবিউট থাকে| hyperlink reference এই শব্দ দুটি থেকে যথাক্রমে h এবং ref নিয়ে href তৈরি হয়েছে। এই এট্রিবিউটের মাঝে একটি লিংক থাকে এবং ক্লিক করলে সেই লিংকে ফেরত যায়। নোঙ্গর টেনে নৌকা কে কাছে টানা আর ক্লিক করে কোন একটি নির্দিষ্ট লিংকে যাওয়া- এই দুই কাজের মাঝে যে মিল সেটা বুঝাতেই এই ট্যাগের নাম anchor ট্যাগ।
<a href=https://www.facebook.com> facebook</a>
এখানে facebook কে বলা anchor text আর www.faceboo.com হলঃ anchor link. facebook লেখাটির উপর ক্লিক করলে www.facebook.com লিংকে চলে যাবে। লিংকটি যদি আপনি নতুন ট্যাবে ওপেন করতে চান তাহলে starting tag এর মাঝে target=”_blank” লিখে দিতে হবে।
আমরা অনেকই জানি না যে, এই ট্যাগ দিয়ে hash(#) এর মাধ্যমে এক পেজের ওয়েব সাইট করা হয়, এই ট্যাগ দিয়ে ডাউনলোড বাটনও তৈরি করা যায়।
Question #7
ওয়েব পেজের সকল কোড দেখার নিয়ম এবং Inspect এর ব্যবহার করে ওয়েব পেজ ডিজাইন করার নিয়ম ?
ওয়েব পেজের উপর রাইট মাউস ক্লিক অথবা F12 প্রেস করলে একপাশে ওয়েব পেজ ও অন্য পাশে html, css, js কোড দেখা যায় এবং সেখানে কোড করে সরাসরি (সেভ ছাড়া) ওয়েব সাইটে কোডিং এর আউটপুট দেখা যায়। এখানে html, css, js কোড করে পরীক্ষামুলক ভাবে ওয়েব ডিজাইন করা যায়।
Question #8
break tag (ব্রেক) ট্যাগ ও horizontal tag (হরিজনটল) ট্যাগের কাজ কি ? এই ট্যাগের ক্লোজিং/শেষ ট্যাগ হয় না কেন ?
br ট্যাগ লাইন ব্রেকের জন্য ব্যবহার করা হয়। br ট্যাগ একটি Empty ট্যাগ, অর্থাৎ এর কোন ক্লোজিং ট্যাগ হয় না। এই ট্যাগটি যেখানে বসবে সেখান থেকে অন্য একটি লাইন শুরু হয়। কোন আর্টিকেল লেখার সময় মাঝে মাঝে লাইন ব্রেকের প্রয়োজন হয়। তখন এই ট্যাগটি ব্যবহার করা হয়। কোন ঠিকানা লেখার সময়, কবিতা লেখার সময় এই ট্যাগ দ্বারা লাইন ব্রেক দেওয়া হয়। কিছু কিছু সময় ভার্টিক্যালী স্পেসের জন্য ও এই ট্যাগ ব্যবহার করা হয়ে থাকে। যেমনঃ- কোন একটি স্থানে দুই তিনবার এই ট্যাগ দিলে সেখানে Top To Bottom বড় একটি Space নিয়ে নেয়। অর্থাৎ যতটি br ট্যাগ দিবেন, ততটি লাইনের সমান স্পেস নিয়ে নেবে।
hr tag: কোন ডকুমেন্ট কিংবা কোন লাইনের নিচের দিকে লম্ব রেখা তৈরি হয়। hr tag আসলে Horizontal Line কে বুঝায়।