ওয়েব ডিজাইন পরিচিত এবং Html
- প্রথমত, HTML (Hyper Text Markup Language) যার দ্বারা ওয়েবপেইজ তৈরি করা হয়।
- দ্বিতীয়ত, HTTP (Hyper Text Transfer Protocol)
- তৃতীয়ত, Web browser; যে প্রোগ্রাম সার্ভার থেকে ডেটা রিসিভ ও অনুবাদ করে ক্লায়েন্টকে তার ফলাফল প্রদর্শন করে।
- স্ট্যাটিক ওয়েবসাইট
- ডাইনামিক ওয়েবসাইট
- ১। ওয়েবসাইটের তথ্য সাধারণত পরিবর্তন হয় না।
- ২। ওয়েবসাইট চালু অবস্থায় তথ্য পরিবর্তন করা কঠিন।
- ৩। কোন ডেটাবেজ থাকে না । অর্থাৎ কেবলমাত্র সার্ভার থেকে ক্লায়েন্টে একমুখী কমিউনিকেশন হয়।
- ৪। খুব দ্রুত লোড হয়।
- ৫। HTML এবং CSS দিয়েই একটি ওয়েবসাইট তৈরি করা যায়।
- ৬। স্ট্যাটিক ওয়েবপেইজের এক্সটেনশন .html বা .htm হয়।
- ১। ওয়েবসাইট ডেভলোপ করা সহজ। ফলে খরচ কম।
- ২। খুব দ্রুত লোড হয়।
- ৩। সহজেই ওয়েবপেইজের লে-আউট পরিবর্তন করা যায়।
- ৪। ডেটাবেজ না থাকায় অধিক নিরাপদ।
- ১। ওয়েবসাইটে তথ্য যুক্ত, আপডেট এবং ডিলিট করার জন্য কোড পরিবর্তন করতে হয়।
- ২। ব্যবহারকারীর কাছ থেকে ইনপুট নেওয়ার ব্যবস্থা থাকে না।
- ৩। ওয়েবসাইটের তথ্য বেশি হলে নিয়ন্ত্রণ করা কঠিন হয়ে যায়।
- ১। ওয়েবসাইট চালু অবস্থায় কোড পরিবর্তন না করেই তথ্য যুক্ত, আপডেট এবং ডিলিট করা যায়।
- ২। ডেটাবেজ থাকায় কুয়েরি করে তথ্য বের করা যায়।
- ৩। সার্ভার থেকে ক্লায়েন্টে এবং ক্লায়েন্ট থেকে সার্ভারে উভয়মুখী কমিউনিকেশন হয়।
- ৪। ডাইনামিক ওয়েবসাইট তৈরি করার জন্য HTML,CSS এর সাথে স্ক্রিপ্টিং ভাষা যেমন- PHP বা ASP.Net বা JSP ইত্যাদি এবং এর সাথে ডেটাবেজ যেমন- MySQL বা SQL বা Oracle ইত্যাদি ব্যবহার করা হয়।
- ৫। ডাইনামিক ওয়েবপেইজের এক্সটেনশন .php বা .asp বা .jsp হয়।
- ১। ওয়েবসাইট চালু অবস্থায় কোড পরিবর্তন না করেই তথ্য যুক্ত, আপডেট এবং ডিলিট করা যায়।
- ২। নির্ধারিত ব্যবহারকারীর জন্য নির্ধারিত ওয়েবপেইজ প্রদর্শনের ব্যবস্থা করা যায়। অর্থাৎ ব্যবহারকারীর প্রোফাইল তৈরি করা যায়।
- ৩। সার্ভার থেকে ক্লায়েন্টে এবং ক্লায়েন্ট থেকে সার্ভারে উভমুখী কমিউনিকেশন হয়।
- ৪। অনেক বেশি তথ্যবহুল হতে পারে।
- ১। ডেটাবেজ ব্যবহৃত হয়, ফলে লোড হতে বেশি সময় নেয়।
- ২। ওয়েবসাইট ডেভলোপ করা কঠিন। ফলে খরচ বেশি।
| স্ট্যাটিক ওয়েবসাইট | ডাইনামিক ওয়েবসাইট |
| যে সকল ওয়েবসাইটের তথ্য সাধারণত পরিবর্তন হয় না তাদেরকে স্ট্যাটিক ওয়েবসাইট বলা হয়। | যে সকল ওয়েবসাইটের তথ্য সাধারণত পরিবর্তনশীল তাদেরকে ডাইনামিক ওয়েবসাইট বলা হয়। |
| HTML এবং CSS দিয়েই একটি ওয়েবসাইট তৈরি করা যায়। | ডাইনামিক ওয়েবসাইট তৈরি করার জন্য HTML,CSS এর সাথে স্ক্রিপ্টিং ভাষা যেমন- PHP বা ASP.Net বা JSP ইত্যাদি এবং এর সাথে ডেটাবেজ যেমন- MySQL বা SQL বা Oracle ইত্যাদি ব্যবহার করা হয়। |
| কোন ডেটাবেজ থাকে না । অর্থাৎ কেবলমাত্র সার্ভার থেকে ক্লায়েন্টে একমুখী কমিউনিকেশন হয়। | ডেটাবেজ থাকে। অর্থাৎ সার্ভার থেকে ক্লায়েন্টে এবং ক্লায়েন্ট থেকে সার্ভারে উভমুখী কমিউনিকেশন হয়। |
| ওয়েবসাইট ডেভলোপ করা সহজ। ফলে খরচ কম। | ওয়েবসাইট ডেভলোপ করা কঠিন। ফলে খরচ বেশি। |
| যেমনঃ পোর্টফোলিও সাইট। | যেমনঃ বিভিন্ন নিউজ পোর্টাল(www.prothomalo.com), সামাজিক যোগাযোগ মাধ্যম(www.facebook.com) ইত্যাদি। |
ব্যবহারের ভিত্তিতে ওয়েবসাইটের প্রকারভেদঃ
| IPV4 | IPV6 |
| ১৯৮১ সালে আবিষ্কার। | ১৯৯৯ সালে আবিষ্কার। |
| ৩২ বিট অ্যাড্রেস। | ১২৮ বিট অ্যাড্রেস। |
| ২৩২ সংখ্যক অদ্বিতীয় অ্যাড্রেস পাওয়া যায়। | ২১২৮ সংখ্যক অদ্বিতীয় অ্যাড্রেস পাওয়া যায়। |
| ডেসিমেল নোটেশন। | হেক্সাডেসিমেল নোটেশন। |
http://hsc.edupoint.com.bd/ict/robotics.html
- 1. Protocol (http://hsc.edupoint.com.bd/ict/robotics.html)
- 2. Domain Name (http://hsc.edupoint.com.bd/ict/robotics.html)
- Sub-domain (http://hsc.edupoint.com.bd/ict/robotics.html)
- Domain (http://hsc.edupoint.com.bd/ict/robotics.html)
- Top-level Domain (http://hsc.edupoint.com.bd/ict/robotics.html)
- Generic Domain (http://hsc.edupoint.com.bd/ict/robotics.html)
- Country Domain (http://hsc.edupoint.com.bd/ict/robotics.html)
- 3. Directory (http://hsc.edupoint.com.bd/ict/robotics.html)
- 4. File Name or Document Name (http://hsc.edupoint.com.bd/ict/robotics.html)
- HTTP – Hyper Text Transfer Protocol
- HTTPS- Hyper Text Transfer Protocol Secure
- FTP – File Transfer Protocol
- IP – Internet Protocol
- TCP- Transmission Control Protocol
- ১। সাব-ডোমেইন
- ২। ডোমেইন
- ৩। টপ-লেভেল ডোমেইন(TLD)
| জেনেরিক ডোমেইন | প্রতিষ্ঠানের ধরন |
| .com | বাণিজ্যিক প্রতিষ্ঠান |
| .mil | মার্কিন সেনাবাহিনীর জন্য সংরক্ষিত |
| .gov | রাষ্ট্রীয় প্রতিষ্ঠান |
| .edu | শিক্ষা প্রতিষ্ঠান |
| .net | নেটওয়ার্ক সার্ভিস |
| .org | অলাভজনক প্রতিষ্ঠান |
| .int | আন্তর্জাতিক সংস্থা |
| কান্ট্রি ডোমেইন | কান্ট্রি নেইম |
| .bd | Bangladesh |
| .uk | United Kingdom |
| .us | United States |
| .in | India |
| .au | Australia |
| .cn | China |
| .ru | Russia |
| .fr | France |
| .ca | Canada |
- ১। লিনিয়ার/ সিকুয়েন্সিয়াল কাঠামো
- ২। ট্রি/হায়ারার্কিক্যাল কাঠামো
- ৩। নেটওয়ার্ক/ ওয়েব লিঙ্কড কাঠামো
- ৪। হাইব্রিড/ কম্বিনেশনাল কাঠামো
HTML এর মৌলিক বিষয় সমূহঃ
- হাইপারটেক্সট( Hyper Text) বলতে “টেক্সট এর মধ্যে টেক্সট”। অর্থাৎ যখন একটি টেক্সটের মধ্যে একটি লিঙ্ক থাকে, তখন একে হাইপারটেক্সট বলে। আপনি যখনই কোনও লিঙ্কে ক্লিক করেন যা আপনাকে নতুন ওয়েব পেইজে নিয়ে আসে, তখন আপনি হাইপারটেক্সটে ক্লিক করেছেন। হাইপারটেক্সট হলো দুই বা ততোদিক ওয়েব পেইজ (HTML ডকুমেন্টস) একে অপরের সাথে লিঙ্ক করার একটি উপায়।
- মার্কআপ(Markup) শব্দটি সেই চিহ্নগুলিকে বোঝায় যা ওয়েব পেইজের কাঠামো নির্ধারণ করতে ব্যবহৃত হয়। মার্কআপ চিহ্নগুলোর কাজ হল ওয়েবপেইজে বিভিন্ন তথ্য কিভাবে প্রদর্শন করবে তা ব্রাউজারকে নির্দেশ দেওয়া। চিহ্নগুলিকে প্রায়শই ট্যাগ বলা হয়।
- ভাষা(Language) শব্দটি সিনট্যাক্সকে বোঝায় যা অন্য কোন ভাষার অনুরূপ।
- মার্কআপ ভাষা হলো একটি কম্পিউটার ভাষা যা টেক্সট ডকুমেন্টের লেআউট এবং ফরম্যাটিং নিয়মগুলো প্রয়োগ করতে ব্যবহৃত হয়। মার্কআপ ভাষা টেক্সটকে আরও ইন্টারেক্টিভ এবং ডাইন্যামিক করে তোলে।
- SGML- Standard Generalized Markup Language
- XML – Extensible Markup Language
HTML ইতিহাস:
HTML এর সুবিধাসমূহঃ
HTML এর অসুবিধাসমুহঃ
HTML ট্যাগঃ
1
|
<opening_tag_name> </closing_tag_name>
|
HTML ট্যাগ দুই প্রকার। যথা –
ডেপ্রিকেটেড ট্যাগঃ
HTML এলিমেন্ট:
HTML অ্যাট্রিবিউট:
- Attribute Name
- Attribute Value
HTML Document বা ওয়েবপেইজের কাঠামোঃ
- Head Section (Optional)
- Body Section
হেড সেকশন (Head Section):
বডি সেকশন (Body Section):
ওয়েবপেইজ তৈরি করার জন্য প্রয়োজনীয় টুলস সমুহঃ
- <h1> …</h1>
- <h2> …</h2>
- <h3> …</h3>
- <h4> …</h4>
- <h5> …</h5>
- <h6> …</h6>
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>
<title> Heading Tags </title>
</head>
<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>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser ignores it.
This paragraph
contains a lot of spaces
in the source code, but the browser ignores it.
</p>
</body>
</html>
|
| ট্যাগ | ব্যবহার |
| <small></small> | টেক্সটকে ছোট করে দেখাতে। |
| <big></big> | টেক্সটকে বড় করে দেখাতে। |
| <em></em> | টেক্সটকে ইম্ফেসাইজড করে দেখাতে। |
| <strong></strong> | টেক্সটকে স্ট্রং করে দেখাতে। |
| <b></b> | টেক্সটকে মোটা বা বোল্ড করে দেখাতে। |
| <i></i> | টেক্সটকে ইটালিক বা বাঁকা করে দেখাতে। |
| <u></u> | টেক্সটকে আন্ডারলাইন করে দেখাতে। |
| <del></del> | টেক্সটি কাটা বুঝাতে। |
| <strike></strike> | টেক্সটি কাটা বুঝাতে। |
| <sub></sub> | টেক্সটকে সাবস্ক্রিপ্ট করে দেখাতে। |
| <sup></sup> | টেক্সটকে সুপারস্ক্রিপ্ট করে দেখাতে। |
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<body>
<small> This is small text </small><br>
<big> This is big text </big><br>
<b> This is bold text </b><br>
<strong> This is strong text </strong><br>
<u> This is underline text </u><br>
<i> This is Italic Text </i><br>
<del> This is deleteted Text </del><br>
This is <sub> subscript </sub> text<br>
This is <sup> superscript </sup> text<br>
</body>
</html>
|
1
2
3
4
5
|
<html>
<body>
(a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
|
<html>
<body>
<h1 style = "font-family:veranda; font-size:18; color:green">
It is a heading
</h1>
<p style = "font-family:Arial; font-size:12; color:red; font-style:Italic">
This is a paragraph with some text
</p>
</body>
</html>
|
1
2
3
4
5
|
<html>
<body>
<font size="14" color="green" face="arial"> This is the use of font tag.</font>
</body>
</html>
|
- গঠন: <img src=”image_path/image_file_name.Image_extension”>
- উদাহরণ: <img src=”logo.png”>
- এখানে, src অ্যাট্রিবিউটে logo হলো চিত্রের নাম এবং png চিত্রের এক্সটেনশন বা ফরমেট।
| অ্যাট্রিবিউট | মান | ব্যবহার |
| src | image_path/name.format | ছবির পাথ, নাম ও ফরমেট নির্ধারন করতে ব্যবহৃত হয়। |
| width | any number(pixel) | ছবির প্রস্থ নির্ধারন করতে ব্যবহৃত হয়। |
| height | any number(pixel) | ছবির উচ্চতা নির্ধারন করতে ব্যবহৃত হয়। |
| alt | alternative text | ছবি লোড না হলে অল্টারনেটিব টেক্সট প্রদর্শন করতে ব্যবহৃত হয়। |
| border | pixels | পিক্সেলে ছবির বর্ডারের প্রস্থ নির্ধারন করতে ব্যবহৃত হয়। |
| align | top,bottom,middle,left right | ছবির অ্যালাইন নির্ধারন করতে ব্যবহৃত হয়। |
1
2
3
4
5
|
<html>
<body>
<img src="E:\photo\logo.jpg" width="200" height="300">
</body>
</html>
|
- ১। গ্লোবাল হাইপারলিঙ্কঃ অন্য কোন ওয়েবসাইট বা ওয়েবপেইজের সাথে লিংক করা।
- ২। লোকাল হাইপারলিঙ্কঃ একই ওয়েবসাইটের বিভিন্ন ওয়েবপেইজের সাথে লিংক করা।
- ৩। ইন্টারনাল হাইপারলিঙ্কঃ একই ওয়েবপেইজের বিভিন্ন সেকশনের সাথে লিংক করা।
| অ্যাট্রিবিউট | মান | ব্যবহার |
| href | url | যে ডকুমেন্টটির সাথে লিংক করা হবে তার অ্যাড্রেস নির্ধারন করতে ব্যবহৃত হয়। |
| target | _blank | লিংক করা ডকুমেন্টটি নতুন উইন্ডো বা নতুন ট্যাবে ওপেন করতে ব্যবহৃত হয়। |
| _self | লিংক করা ডকুমেন্টটি একই উইন্ডো বা একই ট্যাবে ওপেন করতে ব্যবহৃত হয়। (By default) | |
| _parent | লিংক করা ডকুমেন্টটি প্যারেন্ট ফ্রেমে ওপেন করতে ব্যবহৃত হয়। | |
| _top | লিংক করা ডকুমেন্টটি কারেন্ট ট্যাবে ওপেন করতে ব্যবহৃত হয়। | |
| style | text-decoration:none | লিংক টেক্সট এর আন্ডারলাইন মুছতে ব্যবহৃত হয়। |
1
2
3
4
5
|
<html>
<body>
<a href="http://www.edupointbd.com"> EduPointBD </a>
</body>
</html>
|
1
2
3
4
5
|
<html>
<body>
<a href= “http://www.edupointbd.com” > <img src="logo.png"> </a>
</body>
</html>
|
1
2
3
4
5
6
7
8
|
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="audio-file-name.mp3" type="audio/mpeg">
</audio>
</body>
</html>
|
1
2
3
4
5
6
7
8
|
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="video-file-name.mp4" type="video/mp4">
</video>
</body>
</html>
|
HTML লিস্ট : অনেকসময় ওয়েবপেইজের তথ্য লিস্ট আকারে অর্থাৎ আইটেমগুলোকে নাম্বারিং বা পয়েন্ট আকারে প্রকাশ করার প্রয়োজন হয়। তথ্য লিস্ট আকারে প্রদর্শনের জন্য HTML এ তিন ধরনের লিস্ট আছে। যথা-
- ১। অর্ডারড লিস্ট (Ordered List)
- ২। আনঅর্ডারড লিস্ট (Unordered List)
- ৩। ডেসক্রিপশন লিস্ট (Description List)
Ordered List: অর্ডারড লিস্টের আইটেমগুলো সাধারণত অর্ডারিং বা নাম্বারিং করা থাকে। অর্ডারড লিস্ট তৈরি করার জন্য <ol>…</ol> ট্যাগ এবং লিস্ট আইটেম তৈরি করার জন্য <li>…<li> ট্যাগ ব্যবহার করা হয়। অর্ডার এর প্রকৃতি কেমন হবে তা <ol>…</ol> বা <li>…<li> ট্যাগের ওপেনিং ট্যাগে type অ্যাট্রিবিউট এর মাধ্যমে নির্ধারণ করা হয়। যদি কোন type উল্লেখ না থাকে তাহলে Numbered list তৈরি হয়।
অর্ডারড লিস্টে type অ্যাট্রিবিউট এর ব্যবহারঃ
| type অ্যাট্রিবিউট | ব্যবহার |
| type=”1″ | লিস্টের অর্ডারড হবে 1,2,3,4…. |
| type=”a” | লিস্টের অর্ডারড হবে a,b,c,d….. |
| type=”A” | লিস্টের অর্ডারড হবে A,B,C,D…. |
| type=”i” | লিস্টের অর্ডারড হবে i,ii,iii,iv…. |
| type=”I” | লিস্টের অর্ডারড হবে I,II,III,IV…. |
নিচের অর্ডারড লিস্টগুলো তৈরির জন্য HTML কোডটি দেখ-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <html> <body> <h4>Numbered list:</h4> <ol> <li>Physics</li> <li>Chemistry</li> <li>Bangla</li> <li>English</li> </ol> <h4>Letters list With start attribute:</h4> <ol type="A" start="3"> <li>Physics</li> <li>Chemistry</li> <li>Bangla</li> <li>English</li> </ol> <h4>Lowercase letters list:</h4> <ol type="a"> <li>Physics</li> <li>Chemistry</li> <li>Bangla</li> <li>English</li> </ol> <h4>Roman numbers list:</h4> <ol type="I"> <li>Physics</li> <li>Chemistry</li> <li>Bangla</li> <li>English</li> </ol> <h4>Lowercase Roman numbers list:</h4> <ol type="i"> <li>Physics</li> <li>Chemistry</li> <li>Bangla</li> <li>English</li> </ol> </body> </html> |
অর্ডারিং বা নাম্বারিং কত থেকে শুরু হবে তা <ol>…</ol> ট্যাগের ওপেনিং ট্যাগে start অ্যাট্রিবিউট এর মাধ্যমে নির্ধারণ করা হয়। যেমন- start =”3″ হলে, অর্ডারিং বা নাম্বারিং শুরু হবে তৃতীয় অবস্থান থেকে।
নিচের অর্ডারড লিস্টগুলো তৈরির জন্য HTML কোডটি দেখ-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <body> <ol start="3"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol type="A" start="3"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> |
Unordered List: আনঅর্ডারড লিস্টের আইটেমগুলো সাধারণত বুলেট পয়েন্ট আকারে থাকে।আনঅর্ডারড লিস্ট তৈরি করার জন্য <ul>…</ul> ট্যাগ এবং লিস্ট আইটেম তৈরি করার জন্য <li>…<li> ট্যাগ ব্যবহার করা হয়। আনঅর্ডারড এর প্রকৃতি কেমন হবে তা <ul>…</ul> বা <li>…<li> ট্যাগের ওপেনিং ট্যাগে type অ্যাট্রিবিউট এর মাধ্যমে নির্ধারণ করা হয়। যদি কোন type উল্লেখ না থাকে তাহলে Disc bullets list তৈরি হয়।
আনঅর্ডারড লিস্টে type অ্যাট্রিবিউট এর ব্যবহারঃ
| type অ্যাট্রিবিউট | ব্যবহার |
| type=”disc” |
|
| type=”circle” |
|
| type=”square” |
|
নিচের আনঅর্ডারড লিস্টগুলো তৈরির জন্য HTML কোডটি দেখ-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <html> <body> <h4>Disc bullets list:</h4> <ul> <li>Physics</li> <li>Chemistry</li> <li>Bangla</li> <li>English</li> </ul> <h4>Circle bullets list:</h4> <ul type="circle"> <li>Physics</li> <li>Chemistry</li> <li>Bangla</li> <li>English</li> </ul> <h4>Square bullets list:</h4> <ul type="square"> <li>Physics</li> <li>Chemistry</li> <li>Bangla</li> <li>English</li> </ul> </body> </html> |
Nested List: একটি লিস্টের মধ্যে যখন অন্য একটি লিস্ট তৈরি করা হয়, তখন তাকে নেস্টেড লিস্ট বলে। এক্ষেত্রে অর্ডারড লিস্টের মধ্যে আনঅর্ডারড লিস্ট থাকতে পারে। আবার অর্ডারড লিস্টের মধ্যে অর্ডারড লিস্ট এবং আনঅর্ডারড লিস্টের মধ্যে আনঅর্ডারড লিস্টও থাকতে পারে।
নিচের নেস্টেড লিস্টগুলো তৈরির জন্য HTML কোডটি দেখ-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <body> <ol> <li>Website Structure <ul type="square"> <li>Linear</li> <li>Tree</li> <li>Web linked</li> <li>Hybrid</li> </ul> </li> <li>Website Type <ol type="i"> <li>Static</li> <li>Dynamic</li> </ol> </li> </ol> </body> </html> |
নিচের নেস্টেড লিস্টগুলো তৈরির জন্য HTML কোডটি দেখ-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <body> <ol type="1" start="107"> <li> English First Paper</li> <ul type="square"> <li> True/False</li> <li> Fill in the gap</li> </ul> <li> English Second Paper</li> <ul type="circle"> <li> Grammar Section</li> <ol type="a"> <li>Article</li> <li>Narration</li> <li>Preposition</li> </ol> <li> Writing Section</li> </ul> </ol> </body> </html> |
Description List: ওয়েবপেইজে কোন টার্ম এবং তার বর্ণনা সহকারে কোন লিস্ট তৈরি করতে ডেসক্রিপশন লিস্ট ব্যবহৃত হয়। ডেসক্রিপশন লিস্ট তৈরি করার জন্য ডেসক্রিপশন লিস্ট (<dl> </dl>) ট্যাগ ব্যবহৃত হয়। ডেসক্রিপশন লিস্ট ট্যাগ এর মধ্যে টার্ম এবং ডেসক্রিপশন তৈরির জন্য যথাক্রমে <dt> </dt> এবং <dd></dd> ট্যাগ ব্যবহৃত হয়। <dt> এবং <dd> এদের ক্লোজিং ট্যাগ না দিলেও সমস্যা নেই।
নিচের ডেসক্রিপশন লিস্টগুলো তৈরির জন্য HTML কোডটি দেখ-
1 2 3 4 5 6 7 8 9 10 11 | <html> <body> <h2>A Description List</h2> <dl> <dt>Coffee</dt> <dd>black hot drink</dd> <dt>Milk</dt> <dd>white cold drink</dd> </dl> </body> </html> |
HTML দ্বারা টেবিল তৈরিঃ
ওয়েবপেইজ বা ওয়েবসাইট তৈরি করার উদ্দেশ্যই হল বিশ্বব্যাপী কোন তথ্য উপস্থাপন করা। এক্ষেত্রে অনেকসময় বিভিন্ন উপাত্ত এবং তথ্য সারণি বা টেবিল আকারে উপস্থাপন করার প্রয়োজন হয়। টেবিলের বিভিন্ন এলিমেন্টসমূহ-
- HTML টেবিল তৈরি করার জন্য <table>…</table> ট্যাগ ব্যবহৃত হয়। একটি টেবিলের সকল উপাদানগুলো <table>…</table> ট্যাগ এর মধ্যে থাকে।
- প্রতিটি টেবিলে ঐচ্ছিক উপাদান হিসেবে টেবিলের উপরে ক্যাপশন থাকতে পারে। ক্যাপশন লেখার জন্য <caption>–</caption> ট্যাগ ব্যবহৃত হয়।
- টেবিলের প্রতিটি সারি (row) তৈরি করার জন্য <tr>…</tr> ট্যাগ ব্যবহার করা হয়। উপরের টেবিলে তিনটি সারি(row) রয়েছে যেখানে প্রথম, দিতীয় ও তৃতীয় সারিতে তিনটি করে সেল(cell) রয়েছে। অর্থাৎ সারি(row) এর মধ্যে সেলগুলো(cell) লিখা হয়।
- টেবিলে দুই ধরণের সেল(cell) থাকে। এক ধরণের সেল(cell) এ টেবিল হেডার থাকে এবং অপর ধরণের সেল(cell) এ টেবিল ডেটা থাকে।
- টেবিলের হেডার সেল তৈরি করার জন্য <th>…</th> ট্যাগ এবং ডেটা/অবজেক্ট সেল তৈরি করার জন্য <td>…</td> ট্যাগ ব্যবহার করা হয়। <th>…</th> এবং <td>…</td> ট্যাগ দুইটি সবসময় <tr>…</tr> ট্যাগের মধ্যে ব্যবহৃত হয়।
- টেবিল হেডার বাই-ডিফল্ট বোল্ড হয় এবং সেলের কেন্দ্রে(centered) থাকে অপরদিকে টেবিল ডেটা বাই-ডিফল্ট নরমাল এবং সেলের বামে(left aligned) থাকে।
<table> ট্যাগের অ্যাট্রিবিউটসমূহ ও ব্যবহারঃ
<tr> ট্যাগের অ্যাট্রিবিউটসমূহ ও ব্যবহারঃ
<td> ও <th> ট্যাগের অ্যাট্রিবিউটসমূহ ও ব্যবহারঃ
<td>, <th> ও <tr> ট্যাগের “valign” অ্যাট্রিবিউট ও ব্যবহারঃ
টেবিলের সেল এর কনটেন্ট উল্লম্ব বরাবর অবস্থান নির্ধারণে valign অ্যাট্রিবিউট ব্যবহৃত হয়।
Syntax:
<tag_name valign = “top | middle | bottom | baseline”>
অ্যাট্রিবিউটের মানঃ
- top: এটি সেলের কনটেন্টকে টপে সেট করে
- middle: এটি সেলের কনটেন্টকে মিডিলে সেট করে
- bottom: এটি সেলের কনটেন্টকে বোটমে সেট করে
- baseline: এটি সেলের কনটেন্টকে বেসলাইনে সেট করে। বেসলাইন হলো সেই লাইন যেখানে বেশিরভাগ অক্ষর অবস্থান করে।
উদাহরণ-১ঃ নিচের টেবিলটি ওয়েবপেইজে প্রদর্শনের জন্য প্রয়োজনীয় HTML কোডটি দেখ।
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <body> <table border="1"> <Caption>Horizontal headers</Caption> <tr> <th>Name</th> <th>Mobile</th> <th>Email</th> </tr> <tr> <td>Mizan</td> <td>01724351470</td> <td>mizanjust@gmail.com</td> </tr> <tr> <td>Amir</td> <td>01918038095</td> <td>amir@gmail.com</td> </tr> </table> </body> </html> |
উদাহরণ-২ঃ নিচের টেবিলটি ওয়েবপেইজে প্রদর্শনের জন্য প্রয়োজনীয় HTML কোডটি দেখ।
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <body> <table border="1"> <Caption> Vertical headers </Caption> <tr> <th>Name</th> <td> Mizan</td> <td> Amir</td> </tr> <tr> <th>Mobile</th> <td>01724351470</td> <td>01918038095</td> </tr> <tr> <th>Email</th> <td>mizanjust@gmail.com</td> <td>amir@gmail.com</td> </tr> </table> </body> </html> |
উদাহরণ-৩ঃ নিচের টেবিলটি ওয়েবপেইজে প্রদর্শনের জন্য প্রয়োজনীয় HTML কোডটি দেখ।
উপরের টেবিলটিতে contact ধারণকারী সেলটি দুটি সারিকে মার্জ বা একত্র করছে। তাই rowspan অ্যাট্রিবিউট ব্যবহার করতে হবে। এক্ষেত্রে rowspan =”2″ হবে। কারণ দুটি সারিকে একত্র করছে। অর্থাৎ যতগুলো সারিকে একত্র করবে rowspan অ্যাট্রিবিউট এর মান তত হবে।
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <body> <table border="1"> <Caption> Table with rowspan </Caption> <tr> <th>Name</th> <td> Mizan</td> <td> Amir</td> </tr> <tr> <th rowspan="2">Contact</th> <td>01724351470</td> <td>01918038095</td> </tr> <tr> <td>mizanjust@gmail.com</td> <td>amir@gmail.com</td> </tr> </table> </body> </html> |
উদাহরণ-৪ঃ নিচের টেবিলটি ওয়েবপেইজে প্রদর্শনের জন্য প্রয়োজনীয় HTML কোডটি দেখ।
উপরের টেবিলটিতে contact ধারণকারী সেলটি দুটি কলামকে মার্জ বা একত্র করছে। তাই colspan অ্যাট্রিবিউট ব্যবহার করতে হবে। এক্ষেত্রে colspan =”2″ হবে। কারণ দুটি কলামকে একত্র করছে। অর্থাৎ যতগুলো কলামকে একত্র করবে colspan অ্যাট্রিবিউট এর মান তত হবে।
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <body> <table border="1"> <Caption>Table with colspan</Caption> <tr> <th>Name</th> <th colspan="2">Contact</th> </tr> <tr> <td>Mizan</td> <td>01724351470</td> <td>mizanjust@gmail.com</td> </tr> <tr> <td>Amir</td> <td>01918038095</td> <td>amir@gmail.com</td> </tr> </table> </body> </html> |
উদাহরণ-৫ঃ নিচের টেবিলটি ওয়েবপেইজে প্রদর্শনের জন্য প্রয়োজনীয় HTML কোডটি দেখ।
টেবিলের সেলসমূহের মাঝে বাই-ডিফল্ট স্পেস 1px থাকে। যদি সেলসমূহের মাঝে স্পেস 1px এর বেশি থাকে তখন cellspacing অ্যাট্রিবিউট ব্যবহার করতে হবে। উপরের টেবিলটির সেলগুলোর মাঝে 1px এর বেশি স্পেস আছে। তাই cellspacing অ্যাট্রিবিউট ব্যবহার করতে হবে।
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <body> <table border="1" cellspacing="10"> <Caption>Table With cell spacing</Caption> <tr> <th>Name</th> <th>Mobile</th> <th>Email</th> </tr> <tr> <td>Mizan</td> <td>01724351470</td> <td>mizanjust@gmail.com</td> </tr> <tr> <td>Amir</td> <td>01918038095</td> <td>amir@gmail.com</td> </tr> </table> </body> </html> |
উদাহরণ-৬ঃ নিচের টেবিলটি ওয়েবপেইজে প্রদর্শনের জন্য প্রয়োজনীয় HTML কোডটি দেখ।
উপরের টেবিলটির সেলগুলোতে প্যাডিং আছে। তাই cellpadding অ্যাট্রিবিউট ব্যবহার করতে হবে। প্যাডিং হলো সেলের বর্ডার এবং কনটেন্ট এর মধ্যবর্তী দূরত্ব।
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <body> <table border="1" cellpadding="10"> <Caption>Table With cell padding</Caption> <tr> <th>Name</th> <th>Mobile</th> <th>Email</th> </tr> <tr> <td>Mizan</td> <td>01724351470</td> <td>mizanjust@gmail.com</td> </tr> <tr> <td>Amir</td> <td>01918038095</td> <td>amir@gmail.com</td> </tr> </table> </body> </html> |
উদাহরণ-৭ঃ নিচের টেবিলটি ওয়েবপেইজে প্রদর্শনের জন্য প্রয়োজনীয় HTML কোডটি দেখ।
উপরের টেবিলে দ্বিতীয় সারিতে প্রথম, দ্বিতীয় ও তৃতীয় সেলসমূহের কনটেন্টগুলোর উল্লম্ব বরাবর অবস্থান যথাক্রমে টপ, মিডিল ও বোটম এ।
তৃতীয় সারিতে প্রথম, দ্বিতীয় ও তৃতীয় সেলসমূহের কনটেন্টগুলোর উল্লম্ব বরাবর অবস্থান যথাক্রমে বোটম, মিডিল ও টপ এ।
তাই valign অ্যাট্রিবিউট ব্যবহার করতে হবে।
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html> <body> <table border="1"> <tr> <th>Roll</th> <th>Name</th> <th>GPA</th> </tr> <tr height="50"> <td valign="top">101</td> <td valign="middle">Rohim</td> <td valign="bottom">5.00</td> </tr> <tr height="50"> <td valign="bottom">102</td> <td valign="middle">Karim</td> <td valign="top">4.50</td> </tr> </table> </body> </html> |
উদ্দীপক অনুসারে প্রশ্নের উত্তর দাওঃ
গ) উদ্দীপক টেবিলটি ওয়েবপেইজে দেখানোর html কোড লিখ।
সমাধানঃ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <html> <body> <table border="1"> <tr> <th>Science</th> <th>Commerce </th> <th>Humanities </th> </tr> <tr> <td> <ol type="A"> <li>Physic</li> <li>Chemistry</li> <li>Math</li> <li>Biology</li> </ol> </td> <td> <ul type="disc"> <li>Accounting</li> <li>Management</li> <li>Finance</li> <li>Statistic</li> </ul> </td> <td> <ol type="I"> <li>History</li> <li>Islamic History</li> <li>Home Science</li> <li>Economics</li> </ol> </td> </tr> </table> </body> </html> |
উদ্দীপকটি লক্ষ কর এবং প্রশ্নের উত্তর দাওঃ
রানা একটি ওয়েবসাইট তৈরি করে যেখানে home.html এবং about.html নামে দুটি ওয়েবপেইজ তৈরি করে। হোম পেইজে নিমোক্ত টেবিলটি দেখায় এবং about.html পেইজের সাথে হাইপারলিংক করে।
গ) উদ্দীপক টেবিলটি ওয়েবপেইজে দেখানোর html কোড লিখ।
সমাধানঃ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <html> <body> <table border="1"> <tr> <th colspan="2">Heading </th> <td rowspan="2"> <ol type="A"> <li>Data1</li> <li>Data2</li> </ol> </td> </tr> <tr> <td rowspan="2"> <img src="logo.jpg" width="50" height="30"> </td> <td>Data</td> </tr> <tr> <td colspan="2" align="center"> <a href="about.html">Go to about page</a> </td> </tr> </table> </body> </html> |
উদ্দীপকটি লক্ষ কর এবং প্রশ্নের উত্তর দাওঃ
গ) উদ্দীপক টেবিলটি ওয়েবপেইজে দেখানোর html কোড লিখ।
সমাধানঃ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <body> <table border="1"> <tr> <th colspan="3">Student Information </th> <td rowspan="3"><img src="image.jpg" width="50" height="60"></td> </tr> <tr> <th>ID </th> <th>Result</th> <th>Contact </th> </tr> <tr> <td>101</td> <td>A+</td> <td>01724351470</td> </tr> </table> </body> </html> |
উদ্দীপকটি লক্ষ কর এবং প্রশ্নের উত্তর দাওঃ
গ) উদ্দীপক টেবিলটি ওয়েবপেইজে দেখানোর html কোড লিখ।
ঘ) উদ্দীপক টেবিলের সকল সারি(Row) কে স্তম্ভে (Column) এবং সকল স্তম্ভকে সারিতে পরিণত করলে যে টেবিল তৈরি হবে তা ওয়েবপেইজে দেখানোর জন্য html কোড লিখ।
সমাধান (গ) ঃ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <body> <table border="1"> <tr> <th>Student Name</th> <th colspan="3">Compulsory</th> <th>Optional</th> </tr> <tr> <td rowspan="3">Harry Porter</td> <td rowspan="3">Bangla</td> <td rowspan="3">English</td> <td rowspan="3">ICT</td> <td>Physics</td> </tr> <tr> <td>Math</td> </tr> <tr> <td>Biology</td> </tr> </table> </body> </html> |
সমাধান (ঘ) ঃ
উদ্দীপক টেবিলের সকল সারি(Row) কে স্তম্ভে (Column) এবং সকল স্তম্ভকে সারিতে পরিণত করলে নিচের টেবিলটি তৈরি হবে-
প্রাপ্ত টেবিলের এইচটিএমএল কোড-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <body> <table border="1"> <tr> <th>Student Name</th> <th colspan="3">Harry Porter</th> </tr> <tr> <th rowspan="3">Compulsory</th> <td colspan="3">Bangla</td> </tr> <tr> <td colspan="3">English</td></tr> <tr><td colspan="3">ICT</td></tr> <tr> <th>Optional</th> <td>Physics</td> <td>Math</td> <td>Biology</td> </tr> </table> </body> </html> |
উদ্দীপকটি লক্ষ কর এবং প্রশ্নের উত্তর দাওঃ
গ) উদ্দীপক টেবিলটি ব্রাউজারে দেখানোর html কোড লিখ।
সমাধানঃ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <html> <body> <table border="1"> <tr> <th colspan="3">Bangladesh</th> </tr> <tr> <td rowspan="3"> Rivers: <ul type="square" align="center"> <li>Padma</li> <li>Meghna</li> </ul> </td> <td colspan="2" align="center">Padma Division</td> </tr> <tr> <td>Faridpur</td> <td>Gopalgonj</td> </tr> <tr> <td colspan="2" align="center">Shariatpur</td> </tr> </table> </body> </html> |
উদ্দীপকটি লক্ষ কর এবং প্রশ্নের উত্তর দাওঃ
গ) উদ্দীপক টেবিলটি ওয়েবপেইজে দেখানোর html কোড লিখ।
সমাধানঃ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <body> <table border="1"> <tr> <th>Science</th> <th>Humanities</th> <th>Business</th> </tr> <tr> <td>Girls=400</td> <td>Girls=100</td> <td>Girls=250</td> </tr> <tr> <td>Boys=600</td> <td>Boys=200</td> <td>Boys=300</td> </tr> <tr> <td colspan="3" align="center">Total student=1850</td> </tr> </table> </body> </html> |
উদ্দীপকটি লক্ষ কর এবং প্রশ্নের উত্তর দাওঃ
ঘ) উদ্দীপক টেবিলটি ওয়েবপেইজে দেখানোর জন্য html কোড লিখ।
সমাধানঃ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <body> <table border="1"> <tr> <th colspan="2">Heading1</th> <th>Heading2</th> </tr> <tr> <td rowspan="2">(A+B)<sup>2</sup></td> <td>   </td> <td rowspan="2" align="center">R</td> </tr> <tr> <td> S </td> </tr> <tr> <td colspan="2" align="center">H<sub>2</sub>SO<sub>4</sub></td> <td> </td> </tr> </table> </body> </html> |
উদ্দীপকটি লক্ষ কর এবং প্রশ্নের উত্তর দাওঃ
গ) উদ্দীপক টেবিলটি ওয়েবপেইজে দেখানোর জন্য html কোড লিখ।
সমাধানঃ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <body> <table border="1"> <tr> <td> <u>FRUITS:</u> <ul type="none"> <li>Apple</li> <li>Orange</li> <li>Banana</li> </ul> </td> <td> <u>DRINKS:</u> <ol type="A" start="3"> <li>7-Up</li> <li>Pepsi</li> <li>Sprite</li> </ol> </td> </tr> </table> </body> </html> |
উদ্দীপকটি লক্ষ কর এবং প্রশ্নের উত্তর দাওঃ
গ) উদ্দীপক টেবিলটি ওয়েবপেইজে দেখানোর জন্য html কোড লিখ।
সমাধানঃ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <body> <table border="1"> <caption><b><u>Student Info</u></b></caption> <tr> <th>SI</th> <th colspan="2">Subjects</th> <th>Game</th> </tr> <tr> <td rowspan="2" align="center" valign="top">01</td> <td rowspan="2" align="center" valign="top">ICT</td> <td rowspan="2" align="center" valign="top">Math</td> <td>Cricket</td> </tr> <tr> <td>Football</td> </tr> </table> </body> </html> |
উদ্দীপকটি লক্ষ কর এবং প্রশ্নের উত্তর দাওঃ
ঘ) উদ্দীপক টেবিলটি ওয়েবপেইজে দেখানোর html কোড লিখ।
সমাধানঃ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <html> <body> <table border="1"> <tr><th colspan="4">Purchased Equipment</th><tr> <tr> <th rowspan="2">Item No.</th> <th rowspan="2">Item Image</th> <th>Description</th> <th>Price</th> </tr> <tr> <th>Shipping</th> <th>Expanse</th> </tr> <tr> <td rowspan="2" align="center">1</td> <td rowspan="2" align="center"><img src="pc.jpg" width="60" height="70"></td> <td>IBM</td> <td>$400</td> </tr> <tr> <td>Shipping</td> <td>$40</td> </tr> <tr> <td colspan="3" align="center">Total Cost</td> <td>$440</td> </tr> </table> </body> </html> |
উদ্দীপকটি লক্ষ কর এবং প্রশ্নের উত্তর দাওঃ
ঘ) উদ্দীপক টেবিলটি ওয়েবপেইজে দেখানোর html কোড লিখ।
সমাধানঃ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <body> <table border="1"> <tr> <th colspan="3">ICT</th> </tr> <tr> <th rowspan="2">Marks <br>Distribution </th> <th>CQ</th> <th>MCQ</th> </tr> <tr align="center"> <td>50</td> <td>25</td> </tr> <tr> <th>Total</th> <td colspan="2" align="center">100</td> </tr> </table> </body> </html> |
উদ্দীপকটি লক্ষ কর এবং প্রশ্নের উত্তর দাওঃ
ঘ) উদ্দীপক টেবিলটি ওয়েবপেইজে দেখানোর html কোড লিখ।
সমাধানঃ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <body> <table border="1"> <tr> <th>Name</th> <th>Exam</th> <th>GPA</th> <th>Photo</th> </tr> <tr> <td rowspan="2" align="center">Atik</td> <td>SSC</td> <td>5.00</td> <td rowspan="2" align="center"><img src="atik.png" width="100" height="120"></td> </tr> <tr> <td>HSC</td> <td>4.90</td> </tr> </table> </body> </html> |
উদ্দীপকটি লক্ষ কর এবং প্রশ্নের উত্তর দাওঃ
গ) উদ্দীপক টেবিলটি ওয়েবপেইজে দেখানোর html কোড লিখ।
সমাধানঃ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <body> <table border="1"> <tr> <th rowspan="3">GSM</th> <td>Grameenphone</td> </tr> <tr> <td>Airtel</td> </tr> <tr> <td>Banglalink</td> </tr> <tr> <th>CDMA</th> <td>CityCell</td> </tr> </table> </body> </html> |
ওয়েবপেইজ ডিজাইন এবং ডেভেলপমেন্ট: ওয়েবসাইটের কনটেন্টগুলো বিভিন্ন ওয়েবপেইজের কোন অংশে কিভাবে প্রদর্শিত হবে তা নির্ধারন করাকে ওয়েবপেইজ ডিজাইন বলা হয়। ওয়েবপেইজ ডিজাইন সাধারণত গ্রাফিক্স সফটওয়্যার যেমন ফটোশপ দিয়ে করা হয় এবং তা পরবর্তীতে HTML ব্যবহার করে ওয়েবপেইজ ডেভেলপ বা তৈরি করা হয়। এছাড়া বিভিন্ন সার্ভার-সাইড স্ক্রিপটিং ভাষা ব্যবহার করে ডেটাবেজ থেকে ডেটা ওয়েবপেইজে প্রদর্শন করা হয়। অর্থাৎ ওয়েবপেইজ ডিজাইন এবং ডেভেলপমেন্ট করে একটি পুর্নাংগ ওয়েবসাইট তৈরি করা হয়।
ওয়েবপেইজ ডিজাইন এবং ডেভেলপমেন্টের ক্ষেত্রে নিম্নলিখিত ধাপগুলো অনুসরণ করা হয়-
- ১। তথ্য সংগ্রহ
- ২। পরিকল্পনা
- ৩। ইনফরমেশন আর্কিটেকচার
- ৪। ডিজাইন
- ৫। উন্নয়ন
- ৬। টেস্টিং
- ৭। রক্ষণাবেক্ষণ
তথ্য সংগ্রহঃ যে বিষয়বস্তু ওয়েবসাইটে থাকেবে তার সম্পর্কিত বিস্তারিত তথ্য সংগ্রহ করা হয় এই ধাপে।
পরিকল্পনাঃ প্রথমেই ওয়েবসাইট তৈরির লক্ষ্য ও উদ্দেশ্য নির্দিস্ট করতে হয়। ওয়েবসাইটে কী কী বিষয়বস্তু থাকবে তার পরিকল্পনা করা। কোন লেভেলের ব্যবহারকারী টার্গেট তার পরিকল্পনা করা ইত্যাদি কাজগুলো এই ধাপে সম্পন্ন করা হয়।
ইনফরমেশন আর্কিটেকচারঃ এই ধাপে ওয়েবসাইটের জন্য ওয়েবসাইট কাঠামো নির্ধারন করা হয়। এক্ষেত্রে কোন ধরণের ওয়েবসাইট তার উপর ভিত্তি করে ওয়েবসাইটের কাঠামো নির্ধারন করা হয়।
ডিজাইনঃ এই ধাপে ওয়েবসাইটের পেইজগুলোর লে-আউট কেমন হবে তা নির্ধারন করা হয়। অর্থাৎ তথ্যগুলো ওয়েবপেইজের কোন অংশে কীভাবে প্রদর্শিত হবে তা নির্ধারন করা। এই কাজটি বিভিন্ন ডিজাইনিং টুল যেমন- ফটোশপ, এক্সেল ইত্যাদির সাহায্যে করা হয়।
উন্নয়নঃ পূর্ববর্তী ধাপে করা ডিজাইন দেখে HTML ব্যবহার করে ওয়েবপেইজের মূল কাঠামো তৈরি করা হয়। CSS ব্যবহার করে পেইজগুলোর স্টাইলিং নির্ধারন করা হয়। এছাড়া যদি ওয়েবসাইটটি ডাইনামিক হয় তাহলে ডেটাবেজ তৈরি ও সার্ভার-সাইড স্ক্রিপ্টিং ভাষা ব্যবহার করে ডেটাবেজের সাথে কানেকশন তৈরি করে একটি পূর্ণাংগ ওয়েবসাইট তৈরি করা হয়।
টেস্টিংঃ এই ধাপে ওয়েবসাইট তৈরির পর বিভিন্ন ব্রাউজারের সাহায্যে আউটপুট চেক করা হয়। এক্ষেত্রে ওয়েবপেইজ গুলোর লে-আউট সকল ব্রাউজারে একই দেখায় কিনা তা চেক করা, ওয়েবপেইজ লোডিং টাইম পর্যবেক্ষন করা, ওয়েবপেইজগুলো রেস্পসিভ কিনা তা চেক করা ইত্যাদি কাজগুলো এই ধাপে করা হয়।
রক্ষণাবেক্ষণঃ এই ধাপে একটি ওয়েবসাইটের নিরাপত্তা এবং ব্যাকআপ নিশ্চিত করা হয়। এছাড়া যুগোপযোগী করে ওয়েবসাইটটি প্রতিনিয়ত পরিবর্তন ও পরিমার্জন করা হয়।
ওয়েবসাইট পাবলিশিংঃ একটি ওয়েবসাইট তৈরির মূল উদ্দেশ্য হল সেটি যেন বিশ্বের যেকোন স্থান থেকে ওয়ার্ল্ড ওয়াইড ওয়েবের মাধ্যমে ব্যবহারকারী দেখতে পারে। একটি ওয়েবসাইটকে ওয়ার্ল্ড ওয়াইড ওয়েব বা ইন্টারনেটে প্রকাশের প্রক্রিয়াকেই ওয়েবসাইট পাবলিশিং বলা হয়ে থাকে। এজন্য একটি ওয়েবসাইট তৈরি করার পর সেটিকে সার্ভারে সংরক্ষন করতে হয় (যেটিকে হোস্টিং বলা হয়ে থাকে) এবং পাশাপাশি এটিকে সনাক্ত করার জন্য এর অদ্বিতীয় নামকরণের প্রয়োজন হয় (যেটি ডোমেইন নেইম হিসাবে অভিহিত)।
কোনো ওয়েবসাইট পাবলিশ করার জন্য নিম্নলিখিত ধাপগুলো সম্পন্ন করতে হয়-
১। ডেমেইন নেইম রেজিস্ট্রেশন: প্রথমে ওয়েবসাইটের সুন্দর একটি নাম যা সহজেই মনে রাখা যায় এবং অর্থবোধক হয় তা নির্বাচন করে সেই নামের ডোমেইন রেজিস্ট্রেশন করতে হবে। ডোমেইন রেজিস্ট্রেশন করে এমন অনেক কোম্পানি রয়েছে। কোম্পানিগুলোর নিজস্ব কিছু নিয়মকানুন এবং ফি নির্ধারিত আছে। যে কেউ ফি পরিশোধ করে পছন্দ মতো ডোমেইন নেইম রেজিস্ট্রেশন করতে পারে। রেজিস্ট্রেশনের পূর্বে কিছু বিষয় সম্পর্কে জানতে হবে। যেমন- যে নামে রেজিস্ট্রেশন করতে ইচ্ছুক সে নাম অন্য কেউ ব্যবহার করে কিনা চেক করতে হবে। কারণ একই নামে দুটি রেজিস্ট্রেশন হয় না। রেজিস্ট্রেশনটি নিজের নামে নাকি কোম্পানির নামে হবে। ডোমেইনের সকল প্রশাসনিক ক্ষমতা, বিল ইত্যাদি কার নামে হবে। কার মাধ্যমে ডোমেইন রেজিস্ট্রেশন করানো হবে। বিলিং পদ্ধতি কী হবে তা নির্ধারণ করতে হবে। ডোমেইন নেইম রেজিস্ট্রেশন করে এমন কিছু কোম্পানি বা ISP(Internet Service Provider), যেমন- GoDaddy.com, Hostgator.com ইত্যাদি। অর্থের বিনিময়ের পাশাপাশি বিভিন্ন কোম্পানি আছে যারা ফ্রি ডোমেইন নেইম রেজিস্ট্রেশন সার্ভিস প্রদান করে। যেমন- 000webhost.com, freehosting.com ইত্যাদি।
২। ওয়েব সার্ভারে ওয়েবপেইজ হোস্টিং: ওয়েবসাইটের জন্য তৈরিকৃত ওয়েবপেইজগুলোকে একটি রেজিস্ট্রেশনকৃত ডোমেইন এর আন্ডারে কোন ওয়েব সার্ভারে হোস্ট করাকে ওয়েবপেইজ হোস্টিং বলা হয়। ওয়েব সার্ভার বলতে বিশেষ ধরনের হার্ডওয়্যার ও সফটওয়্যারকে বুঝায় যার সাহায্যে ঐ সার্ভারে রাখা কোনো উপাত্ত/তথ্য ইন্টারনেটের মাধ্যমে এক্সেস করা যায়। সারা বিশ্বে অনেক হোস্টিং সার্ভিস প্রোভাইডার রয়েছে যারা অর্থের বিনিময়ে ব্যবহারকারীর প্রয়োজন অনুযায়ী হোস্টিং সার্ভিস প্রদান করে। যেমন- GoDaddy.com, Hostgator.com ইত্যাদি। অর্থের বিনিময়ের পাশাপাশি বিভিন্ন কোম্পানি আছে যারা ফ্রি হোস্টিং সার্ভিস প্রদান করে। যেমন- 000webhost.com, freehosting.com ইত্যাদি।
৩। সার্চ ইঞ্জিন অপটিমাইজেশন: হোস্টিংকৃত ওয়েবসাইটটি আরো বেশি প্রচারমুখী করার জন্য ওয়েবসাইটটিকে সার্চ ইঞ্জিনের সাথে সংযুক্ত করতে হয়। একটি ওয়েবসাইটকে সার্চ ইঞ্জিনের সাথে যুক্ত করার প্রক্রিয়াকে SEO(Search Engine Optimization) বলা হয়। এটি একটি অপশনাল ধাপ। অর্থাৎ প্রথম দুটি ধাপ সম্পন্ন করে SEO না করলেও একটি ওয়েবসাইট লাইভ থাকে।
হোস্টিং এর প্রকারভেদঃ
অপারেটিং সিস্টেমের উপর ভিত্তি করে হোস্টিং দুই প্রকার। যথাঃ উইন্ডোজ হোস্টিং এবং লিনাক্স হোস্টিং।
উইন্ডোজ হোস্টিংঃ যদি ওয়েবসাইট তৈরিতে সার্ভার সাইট স্ক্রিপ্টিং ভাষা হিসেবে ASP(Active Server Page) এবং ডেটাবেজ হিসেবে SQL Server ব্যবহৃত হয়, তখন ঐ ওয়েবসাইটটি উইন্ডোজ অপারেটিং সিস্টেম চালিত সার্ভারে হোস্টিং করতে হয়।
লিনাক্স হোস্টিংঃ যদি ওয়েবসাইট তৈরিতে সার্ভার সাইট স্ক্রিপ্টিং ভাষা হিসেবে PHP( PHP: Hypertext Preprocessor) এবং ডেটাবেজ হিসেবে MySQL ব্যবহৃত হয়, তখন ঐ ওয়েবসাইটটি লিনাক্স অপারেটিং সিস্টেম চালিত সার্ভারে হোস্টিং করতে হয়।
বিভিন্ন ধরণের সুবিধার ওপর ভিত্তি করে হোস্টিং বিভিন্ন প্রকার হয়ে থাকে। যথা-
শেয়ারড হোস্টিংঃ শেয়ারড হোস্টিং এর ক্ষেত্রে সার্ভারের মেমোরি স্পেস ও রিসোর্স অন্যান্য ক্লায়েন্টের সাথে শেয়ার করা হয়।রিসোর্স অন্যদের সাথে শেয়ার করার কারণে সার্ভারের কার্যক্রম ধীর গতির হয়ে থাকে। ফলে ওয়েবসাইট লোড হতে বেশি সময় নেয়। যেহেতু অনেক ক্লায়েন্ট একসাথে একই রিসোর্স শেয়ার করে তাই এর নিরাপত্তা কম। তবে এই ধরণের হোস্টিং ডেডিকেটেড হোস্টিং এর চেয়ে খরচ কম। শেয়ারড হোস্টিংয়ের ক্ষেত্রে ডেটাবেজ, ই-মেইল এবং ব্যান্ডউইথ সব কিছুই সীমিত থাকে। ছোট ওয়েবসাইট এর জন্য এই ধরণের হোস্টিং সবচেয়ে জনপ্রিয়।
ডেডিকেটেড হোস্টিংঃ ডেডিকেটেড হোস্টিং এর ক্ষেত্রে সার্ভারের মেমোরি স্পেস ও রিসোর্স প্রতিটি ক্লায়েন্টের জন্য নির্দিস্ট। অর্থাৎ অন্য ক্লায়েন্টের সাথে শেয়ার করা হয় না। রিসোর্স অন্যদের সাথে শেয়ার না করার কারণে সার্ভারের কার্যক্রম দ্রুত গতির হয়ে থাকে। ফলে ওয়েবসাইট দ্রুত লোড হয়। যেহেতু প্রতিটি ক্লায়েন্ট এর জন্য রিসোর্স ডেডিকেটেড থাকে, অর্থাৎ রিসোর্স শেয়ার হয় না, তাই এর নিরাপত্তাও অনেক বেশি। তবে এই ধরণের হোস্টিং শেয়ার হোস্টিং এর চেয়ে খরচ অনেক বেশি।ডেডিকেটেড হোস্টিংয়ে আনলিমিটেড ডেটাবেজ, ই-মেইল এবং ব্যান্ডউইথ সুবিধা থাকে। যদি ওয়েবসাইট অনেক বড় হয় এবং অধিক নিরাপত্তার প্রয়োজন হয়, তখন এই ধরণের হোস্টিং ব্যবহৃত হয়। এই ধরণের হোস্টিং আবার দুই প্রকার। যথা-
ম্যানেজড হোস্টিংঃ হোস্টিং প্রোভাইডার নির্দিস্ট পরিমাণ টাকার বিনিময়ে কন্ট্রোল প্যানেলে সফটওয়্যার ইন্সটল, নিরাপত্তাসহ সবকিছুই প্রদান করে থাকে।
আনম্যানেজড হোস্টিংঃ এই ধরণের হোস্টিংয়ের ক্ষেত্রে কন্ট্রোল প্যানেলে সফটওয়্যার ইন্সটল, নিরাপত্তাসহ সবকিছুই ওয়েবসাইটের মালিককে করতে হয়।
কোন মন্তব্য নেই