ওয়েব ডিজাইন শেখা: পর্ব ০১

ওয়েব ডিজাইন সম্পর্কে প্রাথমিক ধারণা

সর্বশেষ আপডেট:

প্রায়ই কাছের মানুষজন আমার কাছে ওয়েব ডিজাইন সম্পর্কে জানতে ও শিখতে চায়। কিন্তু সময় করে উঠতে পারিনা। তাদের এবং আরো যারা এ ব্যাপারে আগ্রহী, তাদের সবার জন্যে আমার এ প্রচেষ্টা। এখানে থিওরির চেয়ে প্র্যাকটিক্যাল বিষয়গুলোকে প্রধান্য দেয়ার চেষ্টা করা হয়েছে।

প্রাথমিক যোগ্যতা:

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

  1. কম্পিউটার চালানো সম্পর্কে প্রাথমিক ধারণা থাকতে হবে। যেমন, কোনো প্রোগ্রাম চালু ও বন্ধ করা, ফোল্ডার তৈরি, ফাইল তৈরি, কোনো ফাইল খুলা ইত্যাদি।
  2. ব্রাউজার ও ইন্টারনেট ব্রাউজিং (যেহেতু লালসুরুজে পড়ছি, সেহেতু আশা করা যায় এ বিষয়ে অভিজ্ঞতা আছে, কি বলেন?)।
  3. ইংরেজিতে মোটামোটি টাইপিং স্পিড।

HTML:

HTML-এর পূর্ণরূপ হলো Hypertext Markup Language. এটি একটি Markup Language যার সাহায্যে কোনো ওয়েব পেজ গঠিত হয়। HTML-এর বিভিন্ন ট্যাগ (Tag) রয়েছে যেগুলোর সাহায্যে কোনো তথ্যকে সঠিকভাবে নির্ধারণ (Define) ও উপস্থাপন করা হয়। HTML-এর বিভিন্ন ভার্সন রয়েছে। এর সর্বশেষ ভার্সন হলো HTML5.

Tags/Elements:

একটি ওয়েব সাইটের যেকোনো বিষয় (Content) প্রাথমিকভাবে Tag দ্বারা নির্দিষ্ট করা হয়। এদেরকে Element-ও বলা হয়। যেমন, কোনো প্যারাগ্রাফ বুঝাতে <p> ট্যাগ ব্যহৃত হয়।

সাধারণত ট্যাগ-গুলোর শুরু এবং শেষ – এ দু’টি অংশ রয়েছে। কোনো ট্যাগের শুরু বুঝাতে Smaller Than চিহ্ন (<), তারপর ট্যাগের নাম, এবং সবশেষে Greater Than চিহ্ন (>) ব্যহহৃত হয়। আর ট্যাগ শেষ বুঝাতে Smaller Than চিহ্ন (<)-এর পর / লিখে বাকি অংশ শুরুর মতোই লিখা হয়। যেমন, কোনো প্যারাগ্রাফের শুরু বুঝাতে <p> ব্যবহৃত হয় এবং শেষ বুঝাতে </p> ব্যবহৃত হয়।

<p> This is a paragraph. </p>

আবার কিছু কিছু ট্যাগ রয়েছে যেগুলোর শুরু এবং শেষ একটি মাত্র কোড দ্বারা প্রকাশ করা হয়। এদেরকে Self Closing Tag বলে। যেমন, লাইন ব্রেক বুঝাতে <br> ট্যাগ ব্যবহৃত হয়। যেহেতু একটি মাত্র ট্যাগেই শুরু ও শেষ, সেজন্য আরো সঠিকভাবে বুঝাতে <br/> – এভাবে লিখা হয়। অর্থাৎ Greater Than চিহ্নের আগে / ব্যবহৃত হয়।

Attributes:

শুধু ট্যাগের মাধ্যমে অনেক সময় সব তথ্য ডিফাইন করা সম্ভব হয় না। সেক্ষেত্রে Attributes ব্যবহার করে ট্যাগের সক্ষমতা আরো বাড়ানো যায়। একটি ট্যাগের অধীনে এক বা একধিক attribute থাকতে পারে। প্রতিটি Attribute-এর অধীনে আবার Property থাকে। যেমন, Anchor <a> ট্যাগের মাধ্যমে লিংক তৈরি করা হয়। শুধু <a> দ্বারা লিংক সম্পূর্ণ হয় না। কোন্ পেজের সাথে লিংক তা বুঝাতে href attribute টি ব্যবহৃত হয়।

<a>Go to Google</a>
<a href="https://google.com">Go to Google</a>

প্রথম লাইন দ্বারা লিংকটি সম্পূর্ণ হয়নি। কেননা কোন্ পেজের সাথে লিংক করা হয়েছে তা দেয়া হয়নি। দ্বিতীয় লাইনে আমাদের লিংকটি সম্পূর্ণ হয়েছে। এখানে href কে বলা হয় Attribute, আর https://google.com হলো তার Property.

href এর ক্ষেত্রে যেকোনো লিংক-ই property হিসেবে ব্যবহৃত হতে পারে। আবার কিছু কিছু attribute-এর ক্ষেত্রে নির্দিষ্ট সংখ্যক property রয়েছে। ইচ্ছে করলেই এর বাইরে কোনো কিছু ব্যবহার করা যায় না।

যেমন, উপরের লিংকটি কি নতুন ট্যাবে খুলবে, নাকি বর্তমান ট্যাবেই খুলবে তা বুঝাতে target ব্যবহৃত হয়। target-এর property হিসেবে কেবল চারটি ভ্যালু (Value) ব্যবহার করা যায়।

Attribute ও Property লিখার নিয়ম:

Attribute ও Property একসাথে লিখার কিছু নিয়ম রয়েছে।

১। শুরুর ট্যাগে Attribute-Prpoerty লিখা হয়। ট্যাগের নামের পর একটি স্পেস দিয়ে তা লিখতে হয়। Attribute-এর নামের পর সমান চিহ্ন দিয়ে Property লিখতে হয়।

<input type=text />

২। Property-এর মধ্যে কোনো স্পেস বা স্পেশাল ক্যারেক্টার থাকলে সেটিকে সিঙ্গেল কিংবা ডাবল কোটেশনের মধ্যে রাখতে হয়। তবে সাধারণভাবে, যে কোনো property-কেই কোটেশনের মধ্যে রাখা হয়।

<input type="text" />
<img alt="Image Alternate Text" />

৩। যেসব attribute-এর একটিই মাত্র property হতে পারে, সেক্ষেত্রে propety না লিখলেও চলে। required attribute-এর property কেবল একটিই হতে পারে, আর তা হলো required। তাই নিচের দুটিই চলে।

<input required="required" />
<input required />

শেয়ার, কমেন্ট, মেইল বা প্রিন্ট করুন

Leave a Reply