পাঠ ১ / ৫
ওয়েবসাইট ও তার কাঠামো
এই পাঠের ভিডিও ও ক্লাস রেকর্ডিং শিগগির যুক্ত হবে।
URL ভেঙে দেখা
- ঠিকানা: https://www.qudexa.tech/about
- https হলো প্রোটোকল।
- www.qudexa.tech হলো ডোমেইন।
- /about হলো সাইটের ভেতরের পেজ।
ওয়েব ডিজাইন পরিচিতি এবং HTML
ওয়েবসাইট, HTML ট্যাগ, টেবিল, লিংক ও হোস্টিং
০%
০/৫ পাঠ শেষ
পাঠ
ইন্টারঅ্যাকটিভ ল্যাব
লাইভ HTML এডিটর
বামে কোড বদলাও, ডানে সঙ্গে সঙ্গে পেজ দেখো।
চ্যাপ্টার নোট
ওয়েব ডিজাইন পরিচিতি এবং HTML
- একাধিক সম্পর্কিত ওয়েব পেজ মিলে ওয়েবসাইট।
- কাঠামো: লিনিয়ার, হায়ারার্কিক্যাল, নেটওয়ার্ক ও কম্বিনেশন।
- প্রথম পেজকে হোম পেজ বলে।
উদাহরণ
URL ভেঙে দেখা
- ঠিকানা: https://www.qudexa.tech/about
- https হলো প্রোটোকল।
- www.qudexa.tech হলো ডোমেইন।
- /about হলো সাইটের ভেতরের পেজ।
বিস্তারিত
ওয়েব পেজ হলো ব্রাউজারে দেখা একটি পৃষ্ঠা। সম্পর্কিত অনেক ওয়েব পেজ মিলে ওয়েবসাইট হয়। সারা বিশ্বের ওয়েবসাইটের সমষ্টিকে World Wide Web বলে, যা উদ্ভাবন করেন টিম বার্নার্স-লি।
ওয়েবসাইট দুই ধরনের। স্ট্যাটিক সাইটের লেখা হাতে না বদলালে বদলায় না। ডায়নামিক সাইট ডেটাবেস থেকে তথ্য এনে পেজ তৈরি করে, যেমন ফেসবুক।
পেজগুলো কীভাবে সাজানো হবে, সেটিই ওয়েবসাইটের কাঠামো। সাইটের ধরন অনুযায়ী সঠিক কাঠামো বাছলে ব্যবহারকারী সহজে তথ্য খুঁজে পান।
শব্দ
- ব্রাউজার
- ওয়েব পেজ দেখার সফটওয়্যার।
- URL
- Uniform Resource Locator, ওয়েব পেজের ঠিকানা।
- HTTP
- HyperText Transfer Protocol, ওয়েব পেজ আনার নিয়ম।
টেবিল
ওয়েবসাইটের কাঠামো
| কাঠামো | গঠন | উপযোগী ক্ষেত্র |
|---|---|---|
| লিনিয়ার | পেজ একটির পর একটি | ধাপে ধাপে পাঠ বা টিউটোরিয়াল |
| হায়ারার্কিক্যাল | গাছের মতো, ওপর থেকে নিচে | প্রতিষ্ঠানের সাইট |
| নেটওয়ার্ক | যেকোনো পেজ থেকে যেকোনো পেজে | তথ্যভিত্তিক সাইট |
| কম্বিনেশন | ওপরের কয়েকটি মিলিয়ে | বড় সাইট |
ভুল
- ইন্টারনেট ও ওয়েব এক নয়। ইন্টারনেট হলো নেটওয়ার্ক, ওয়েব তার একটি সেবা।
- ব্রাউজার ও সার্চ ইঞ্জিন আলাদা। Chrome ব্রাউজার, Google সার্চ ইঞ্জিন।
টিপস
উদ্দীপকে পেজের সংযোগের বর্ণনা পড়ে কাঠামো চেনো এবং পারলে ছোট চিত্র এঁকে দেখাও।
- HTML = Hyper Text Markup Language।
- পেজের মূল অংশ html, head ও body ট্যাগে থাকে।
- h1 থেকে h6 শিরোনাম এবং p অনুচ্ছেদের ট্যাগ।
উদাহরণ
একটি সম্পূর্ণ পেজ
<!DOCTYPE html> <html> <head> <title>আমার পেজ</title> </head> <body> <h1>স্বাগতম</h1> <p>H<sub>2</sub>O হলো পানি।</p> </body> </html>
- title ট্যাগের লেখা ব্রাউজারের ট্যাবে দেখা যায়।
- sub ট্যাগ 2 কে নিচে নামিয়ে দেয়।
বিস্তারিত
HTML কোনো প্রোগ্রামিং ভাষা নয়, এটি মার্কআপ ভাষা। এটি ব্রাউজারকে জানায় কোনটি শিরোনাম, কোনটি অনুচ্ছেদ, কোনটি ছবি।
HTML লেখা হয় ট্যাগ দিয়ে। বেশিরভাগ ট্যাগের শুরু ও শেষ আছে, যেমন <p> ও </p>। ট্যাগের ভেতরে অ্যাট্রিবিউট দিয়ে বাড়তি তথ্য দেওয়া হয়, যেমন src বা href।
পেজের দুটি মূল অংশ। head অংশে শিরোনাম ও সেটিংস থাকে, যা পেজে সরাসরি দেখা যায় না। body অংশের সবকিছু ব্রাউজারে দেখা যায়। HTML ফাইল .html বা .htm নামে সেভ করতে হয়।
শব্দ
- ট্যাগ
- কোণ বন্ধনীর ভেতরের HTML নির্দেশ।
- অ্যাট্রিবিউট
- ট্যাগের বাড়তি তথ্য।
- এলিমেন্ট
- শুরুর ট্যাগ, ভেতরের লেখা ও শেষ ট্যাগ মিলে।
টেবিল
প্রয়োজনীয় ট্যাগ
| ট্যাগ | কাজ |
|---|---|
| <h1> থেকে <h6> | শিরোনাম, h1 সবচেয়ে বড় |
| <p> | অনুচ্ছেদ |
| <br> | নতুন লাইন |
| <hr> | আড়াআড়ি রেখা |
| <b>, <i>, <u> | গাঢ়, বাঁকা, নিচে দাগ |
| <sub>, <sup> | নিচে ও ওপরে ছোট লেখা |
ভুল
- শেষ ট্যাগে / দিতে ভুলো না।
- ট্যাগ এলোমেলো বন্ধ করো না। যেটি পরে খোলা, সেটি আগে বন্ধ হবে।
টিপস
x² লিখতে sup এবং H₂O লিখতে sub, এই দুটি ট্যাগ পরীক্ষায় কাজে লাগে।
- table, tr, th ও td দিয়ে টেবিল হয়।
- colspan ও rowspan ঘর একত্র করে।
- ul ক্রমহীন এবং ol ক্রমযুক্ত তালিকা।
উদাহরণ
ফলাফলের টেবিল
<table border="1">
<tr>
<th colspan="2">ফলাফল</th>
</tr>
<tr>
<td>রাফি</td>
<td>A+</td>
</tr>
</table>- প্রথম সারির একটি ঘর দুই কলাম জুড়ে আছে।
- দ্বিতীয় সারিতে দুটি আলাদা ঘর।
বিস্তারিত
টেবিল তৈরি হয় সারি ধরে। table পুরো টেবিল, tr একটি সারি, td একটি ঘর এবং th শিরোনামের ঘর। তাই আগে সারি, তারপর সেই সারির ঘর লিখতে হয়।
একাধিক ঘর একত্র করতে colspan ও rowspan ব্যবহৃত হয়। colspan পাশাপাশি কলাম জোড়া দেয়, rowspan ওপর-নিচের সারি জোড়া দেয়।
তালিকা তিন ধরনের। ul বুলেট দিয়ে, ol নম্বর দিয়ে, আর dl শব্দ ও তার অর্থের জন্য। প্রতিটি আইটেম li ট্যাগে থাকে।
শব্দ
- colspan
- একটি ঘর কতটি কলাম জুড়ে থাকবে।
- rowspan
- একটি ঘর কতটি সারি জুড়ে থাকবে।
- border
- টেবিলের সীমারেখা দেখানোর অ্যাট্রিবিউট।
টেবিল
ol এর type অ্যাট্রিবিউট
| মান | ক্রম |
|---|---|
| 1 | 1, 2, 3 |
| A | A, B, C |
| a | a, b, c |
| I | I, II, III |
| i | i, ii, iii |
ভুল
- td সরাসরি table-এর ভেতরে নয়, tr-এর ভেতরে থাকে।
- colspan দিলে সেই সারিতে ঘরের সংখ্যা কমাতে হয়।
টিপস
টেবিল আঁকতে দিলে আগে খাতায় সারি ও কলাম গুনে নাও, তারপর tr ও td লেখো।
- a ট্যাগের href দিয়ে হাইপারলিংক হয়।
- img ট্যাগের src ছবির ঠিকানা এবং alt বিকল্প লেখা।
- img একটি খালি ট্যাগ, এর শেষ ট্যাগ লাগে না।
উদাহরণ
ছবিতে চাপ দিলে অন্য পেজ
<a href="school.html"> <img src="school.jpg" alt="স্কুল" width="300"> </a>
- img ট্যাগটিকে a ট্যাগের ভেতরে রাখা হয়েছে।
- তাই পুরো ছবিটিই লিংক হয়ে গেছে।
বিস্তারিত
হাইপারলিংক ওয়েবের মূল শক্তি। a ট্যাগের href অ্যাট্রিবিউটে ঠিকানা দিলে লেখায় চাপ দিয়ে সেখানে যাওয়া যায়। লিংক হতে পারে অন্য সাইটে, একই সাইটের পেজে, বা একই পেজের কোনো অংশে।
img ট্যাগ পেজে ছবি বসায়। src এ ছবির ঠিকানা, alt এ ছবি না এলে দেখানোর লেখা, আর width ও height এ আকার দেওয়া হয়।
ঠিকানা দুই ধরনের। অ্যাবসলিউট ঠিকানা পুরোটা লেখা হয়, যেমন https দিয়ে শুরু। রিলেটিভ ঠিকানা বর্তমান ফাইলের সাপেক্ষে লেখা হয়, যেমন about.html।
শব্দ
- href
- লিংকের গন্তব্য।
- src
- ছবি বা ফাইলের উৎস।
- alt
- ছবির বিকল্প লেখা।
- target="_blank"
- লিংক নতুন ট্যাবে খোলে।
টেবিল
লিংকের ধরন
| ধরন | উদাহরণ |
|---|---|
| বাইরের সাইট | <a href="https://www.qudexa.tech"> |
| একই সাইটের পেজ | <a href="about.html"> |
| ইমেইল | <a href="mailto:info@qudexa.tech"> |
| ছবিকে লিংক | <a href="a.html"><img src="a.jpg"></a> |
ভুল
- ছবির জন্য href নয়, src ব্যবহৃত হয়।
- লিংকের জন্য src নয়, href ব্যবহৃত হয়।
টিপস
নিচের লাইভ এডিটরে ট্যাগ লিখে সঙ্গে সঙ্গে ফল দেখো। লিখে শিখলে পরীক্ষায় ভুল কম হয়।
- ডোমেইন হলো সাইটের নাম বা ঠিকানা।
- হোস্টিং হলো সার্ভারে সাইটের ফাইল রাখার জায়গা।
- IP ঠিকানা মনে রাখা কঠিন, তাই ডোমেইন ব্যবহৃত হয়।
উদাহরণ
সাইট প্রকাশের ধাপ
- সাইটের ফাইল তৈরি করে নিজের কম্পিউটারে পরীক্ষা করো।
- একটি ডোমেইন নাম কেনো বা নিবন্ধন করো।
- হোস্টিং নাও।
- ফাইল সার্ভারে আপলোড করো।
- ডোমেইনকে হোস্টিংয়ের সঙ্গে যুক্ত করো।
বিস্তারিত
বানানো সাইট নিজের কম্পিউটারে থাকলে অন্য কেউ দেখতে পায় না। সবার জন্য খুলতে হলে সাইটটি সব সময় চালু থাকা সার্ভারে রাখতে হয়। একেই ওয়েবসাইট প্রকাশ বা পাবলিশ করা বলে।
এর জন্য দুটি জিনিস লাগে। ডোমেইন হলো সাইটের নাম, আর হোস্টিং হলো ফাইল রাখার জায়গা। এরপর ফাইলগুলো সার্ভারে আপলোড করতে হয়।
প্রতিটি কম্পিউটারের একটি IP ঠিকানা থাকে, যা সংখ্যায় লেখা ও মনে রাখা কঠিন। DNS ডোমেইন নামকে IP ঠিকানায় রূপান্তর করে।
শব্দ
- DNS
- Domain Name System, নাম থেকে IP বের করে।
- IP ঠিকানা
- নেটওয়ার্কে যন্ত্রের সংখ্যাভিত্তিক ঠিকানা।
- FTP
- File Transfer Protocol, সার্ভারে ফাইল পাঠানোর নিয়ম।
টেবিল
ডোমেইনের শেষাংশ
| শেষাংশ | সাধারণ ব্যবহার |
|---|---|
| .com | বাণিজ্যিক |
| .edu | শিক্ষা প্রতিষ্ঠান |
| .gov | সরকারি |
| .org | সংগঠন |
| .bd | বাংলাদেশ |
ভুল
- ডোমেইন ও হোস্টিং এক নয়। একটি ঠিকানা, অন্যটি জায়গা।
টিপস
তুলনা মনে রাখো: ডোমেইন হলো বাড়ির ঠিকানা, হোস্টিং হলো বাড়িটি।