নতুনদের জন্য গল্পে গল্পে ওয়েব সাইট ডিজাইন

2 207

কেমন আছেন আপনারা? আসা করি ভাল। আজ একটু ওয়েব সাইট  ডিজাইন নিয়ে গল্প করব। সাথে থকুন।

নতুনদের জন্য গল্পে গল্পে ওয়েব সাইট ডিজাইন এর সাধারণ ধারণা। তো শুরু করি?

আচ্ছা বলেনতো এইচটিএমএল (HTML)কাকে বলেঃ-

কি হিজি বিজি লিখা তাইনা? একটু পড়ুন। বুঝতে পারবেন।

 

(HTML)হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ (অথবা এইচটিএমএল, ইংরেজি: Hyper Text Markup Language) হলো একটি মার্ক আপ ল্যাঙ্গুয়েজ। এইচটিএমএল এর মার্ক আপ ট্যাগ সমূহ ব্যাবহার করে ওয়েবপেজ এর বেসিক কাঠামো তৈরি করা হয়।
প্রকৃত অর্থে এটি কোনো প্রোগ্রামিং ল্যাংগুয়েজ নয় বরং একটি মার্কআপ ল্যাংগুয়েজ যা একসারি মার্কআপ ট্যাগ এর সমন্বয় গঠিত । ইন্টারনেটে, তথা ওয়েবসাইটে ওয়েবপেজ তৈরিতে এইচ টি এম এল সবচেয়ে বেশি ব্যবহৃত হয়। এই ফাইলের এক্সটেনশন .html অথবা .htm উভয়ই হতে পারে। এতে বিভিন্ন এইচটিএমএল ট্যাগ ব্যবহার করে বিভিন্ন ফর্ম্যাটিং, অবজেক্ট ও লিংক প্রকাশ করা করা হয়। HTML এর সর্বশেষ ভার্সন হলো HTML5 যার উন্নয়ন কাজ এখন সম্পূর্ণ এবং নতুন আদর্শমান । HTML5 এ ওয়েবসাইটে অডিও,ভিডিও যোগ করার জন্য নতুন আদর্শ(স্ট্যান্ডার্ড) যোগ করা হয়েছে।

“এইচটিএমএল” হচ্ছে মূলত এমন একটি ল্যাংগুয়েজ যা কোন ওয়েব পেইজের বর্ণনাকারী হিসেবে কাজ করে। আপনি যদি ওয়েব সাইট তৈরী করতে চান তাহলে এই ল্যাংগুয়েজটি জানলেই হবে। এরপর যদি CSS শেখেন তাহলে ওয়েব সাইটটিকে আরেকটু প্রান দিতে পারবেন। তারপর ধারাবাহিকভাবে জাভাস্ক্রিপ্ট।

আচ্ছা এবার বলেন (CSS) কাকে বলেঃ-

CSS এর মানে Cascading Style Sheet একটি ওয়েবসাইটকে সুন্দর করে সাজাতে ও আকর্ষনিক করে গড়ে তুলতে CSS এর ভুমিকা অনেক। HTML এর মাধ্যমে জেকোন ওয়েবসাইটের ষ্ট্রাকচার তৈরি করা যায় কিন্ত এটিকে আকর্ষনিয় করে গড়ে তুলতে CSS ব্যবহার করা অতি জরুরী।

ওয়েবসাইট তৈরি করতে আমরা যদি শুধুমাত্র HTML ব্যবহার করি তা হলে শুধুমাত্র টেক্সট আকারে শো করবে কিন্ত CSS এর মাধ্যমে ঐ HTML কে জুড়ে একটি আকর্ষনিয় সাইট তৈরি করা যায়।

আজ একটু HTML শিখি, কি বলেনঃ-

কোড লেখার আগে পরে নির্দিষ্ট কিছু চিহ্নসহ নির্ধারিত কিছু শব্দ ব্যাবহার করা হয়। এগুলোকে ট্যাগ বলে। একটি হচ্ছে আরম্ভ ট্যাগ (যেমন <h1>) এবং অপরটি সমাপ্তি ট্যাগ (</h1>)

হেডিং

এইচটিএমএল হেডিং <h1> থেকে <h6> ট্যাগসমূহ দ্বারা লেখা হয়। h1 হচ্ছে সবচেয়ে বড় হেডিং এবং ক্রমান্বয়ে h6 সবচেয়ে ছোট। বিভিন্ন ধরণের বড় ছোট হেডিং নিম্নরূপে লেখা হয়।

<h1>বড় হেডিং</h1>
<h6>ছোট হেডিং</h6>

অনুচ্ছেদ (যাকে বলে Paragraph)

কোন অনুচ্ছেদ লেখার জন্যে আরম্ভ ট্যাগ হিসেবে <p> এবং সমাপ্তি ট্যাগ হিসেবে </p> ব্যাবহার করতে হয়। আপনার কাঙ্খিত অনুচ্ছেদটি টি <p> এবং

মাঝখানে লেখা হয়।
উদাহরণঃ

<p>.আপনার কাঙ্খিত অনুচ্ছেদ..</p>
<p>আপনার কাঙ্খিত অনুচ্ছেদ</p>

লিঙ্ক (যাকে বলে Anchor tag)

অন্য কোন ওয়েব পৃষ্ঠার লিঙ্ক দিতে নিম্নের কোড ব্যবহার করতে হয়।

<a href="url">প্রদর্শিত টেক্সট</a>

এইচটিএমএল টেবিল

এইচটিএমএল এ টেবিল তৈরী করার জন্য নিম্নের কোড ব্যাবহার করা হয়।টেবিল তৈরীতে চার ধরনের Tag ব্যাবহার করে হয়।

<table>
   <tr></tr>
   <th></th> 
   <td></td>
</table>

<tr> ট্যাগ ব্যাবহার করা হয় Table Row লেখার জন্য ।

<th> ট্যাগ ব্যাবহার করা হয় Table Header লেখার জন্য ।

<td> ট্যাগ ব্যাবহার করা হয় table Data লেখার জন্য ।

<table border="1">
   <tr>
      <th>দেশের নাম</th>
      <th>স্বাধীনতার বছর</th>
   </tr>
   <tr>
      <td>বাংলাদেশ</td>
      <td>১৯৭১</td>
   </tr>
</table>

উপরের কোডটির আউটপুট হিসেবে নিচের টা আসবে।

আর আপনি CSS কোডিং করে এমন করে নিবেন। কি কঠিন মনে হচ্ছে?

দেশের নামস্বাধীনতার বছর
বাংলাদেশ১৯৭১

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

আপনাকে কোষ্টি পাথড়ের সাথে সবসময় নিজেকে যাচাই করতে হবে। তাহলেই সফল মানুষ হতে পারবেন।

ভাল থাকবেন।

2 মন্তব্য
  1. মুহম্মদ নাফিজ রহমান বলেছেন

    পোষ্টটি অনেক সুন্দর হয়েছে। 🙂

    1. Mahmudul hossain Rabby বলেছেন

      Thank you 🙂

উত্তর দিন