Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. HTML
Webdesign

চেক করে দেখুন সিএসএস ছাড়া আপনার ওয়েবসাইট কেমন দেখায়

by
Length:ShortLanguages:

Bengali (বাংলা) translation by Arnab Wahid (you can also view the original English article)

HTMLইন্টারনেটের কোর। সিএসএস বেশি ব্যবহার করতে গিয়ে আমরা ভুলে যাই যে এটাও কিছু নিয়ম মেনে সাজানো দরকার। কিন্তু এসব করার আগে সাইটের কোর HTMLঠিক আছে কিনা তা চেক করে নেয়া দরকার।

“Failure is simply the opportunity to begin again, this time more intelligently.” — Henry Ford

নরমালি আমার উক্কতি পছন্দ না। কিন্তু এটা খুব সত্য কথা। এভাবেই আমাদের ডেভেলাপ করা উচিৎ।

এরর দিয়ে শুরু করি

স্যাস দিয়ে সিএসএস কম্পাইল করলে, আপনি নিশ্চই এর আগে কম্পাইল এরর দেখেছেন। কমান্ড লাইনে এমন দেখা যায়।

Syntax error: Invalid CSS after ".module": expected "{", was "}"

মাঝে মাঝে এরর কমান্ড লাইনে শো করে না। কিন্তু সাইট ভিউ করতে ভাঙা দেখা যায়।

এমন হলেও আমরা সাথে সাথে এদিটর ওপেন করে এটা ঠিক করে ফেলি, যেন খারাপ না দেখা যায়। কিন্তু, ওয়েট! এখান থেকে শেখার অনেক কিছু রয়েছে।

স্যাস কম্পাইল এরর থেকে আমরা দেখে নিতে পারি আমাদের HTML কোরের কি অবস্থা। পেজ লোড হওয়ার সময় ব্রাউজার একটি .html ফাইল কল করে, এরপর ফাইলের ভিতরে লিংক করা জন্য ফাইল ব্রাউজারে লোড হয়। জেরেমি কিথ বলেছেন,

“Every line of CSS you write is a suggestion. You are not dictating how the HTML should be rendered; you are suggesting how the HTML should be rendered. I find that to be a very liberating and empowering idea.”

সিএসএস রুল HTML এর জন্য সাজেশন, রুল না। এটা খেয়াল রাখতে হবে। পেজটি যেমন দেখা যাবে। স্ট্রাইল ব্রেক থেকে HTML এর কোর ঠিক করে নেয়াই সমীচীন। HTML অনেক পুরোনো টেকনোলজি। প্রথম ওয়েবসাইট এখনও আছে, যেটা রেস্পন্সিভ!

ইয়ান ইয়েটস যেমন বলেন,

"সব ওয়েবসাইটই রেস্পন্সিভ, আমরা স্টাইলিং করে ভাঙা শুরু করার আগে।"

নিজের সাইটের পিওর HTML চেক করার সময় ভাবুনঃ

  1. স্ট্রাইকচার কি ঠিক আছে, কন্টেন্ট কি পড়া যাচ্ছে? সিএসএস ছাড়া?
  2. কন্টেন্ট <ul> বা <dl> এর মত ট্যাগ দিয়ে ঠিক মত স্ট্রাকচার করা তো?
  3. টেক্সটের স্যাম্যানটিক্স ঠিক আছে তো? <strong>  বা <em> বা <span> এর জন্য ট্যাগের যথাযথ ব্যবহার হচ্ছে তো?

এখনই চেক করে নিন না। নিজের সাইটে গিয়ে ব্রাউজারের ডেভেলাপার টুলস অন করুন, এরপর .css ফাইলের সব রুল রিমুভ করে দিন।

টিপঃ বা আপনি ক্রোমের ওয়েব ডেভেলাপার প্লাগিন ব্যবহার করে এই কাজ করতে পারেন।

দেখুন! আমার সাইটে অনেক কিছু ঠিক করে নেয়ার সুজোগ রয়েছে। কিছু ইলিমেন্ট এখানে দরকার নেই আসলে। আমি এগুলা রিমুভ করে নিবো। পরে জাভাস্ক্রিপ্ট দিয়ে ডম থেকে কাজ করা যাবে। কিছু লিস্ট কম্পোনেন্ট টুইক করে নিবো, স্যামান্টিক ঠিক করে নিবো। কিন্তু আমার ওয়েবসাইব বাদ। আগে নিজেরটা দেখুন।

আপনার ওয়েবসাইট

কি দেখলেন? ঠিক আছে? হেডিং হেডিং এর মতই দেখাচ্ছে তো? লিস্ট লিস্টের মত দেখাচ্ছে তো? মার্কআপ ঠিক আছে তো? HTMLসব সাইটের বেসিক। জাস্টিন জ্যাকসন এই ব্যাপারে চমৎকার একটি উদাহরণ দিয়েছে। HTMLসলিড হলে, বাকি সাইট নিয়ে চিন্তা কম থাকে। পেজ ঠিক মত লোড না হলেও, সবাই পেজ পড়তে পারবে।

a11y

একসেসিবল কন্টেন্ট দিয়ে স্টার্ট করুন। এখানে ভালো HTML কোরের ব্যবহারের অনেক উদাহরণ আছে। জেফরি ভিন বলেছেন,

“[I deliver] solutions to my clients that are far less complex to implement, are much easier to maintain, cost exponentially less to serve, work on multiple browsers and devices, do way better in the search engine lottery, and — of course — are accessible to everyone … everyone … using the Web today. আর এটার ব্যবসায়িক ভ্যালুও কম না। কারণ এটা ভালো ডিজাইন প্র্যাক্টিস।

পরিশেষ

তো পরের বার সিএসএস কম্পাইলিং এরর পেলে সাইটের কোর দেখে নিবেন, যে কোন কিছু ইমপ্রুভ করা যায় কিনা। এটা দিয়ে অনেক কিছু শিখতে পারবেন।

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.