ফ্যান্সি সিএসএস শিরোনাম এবং শিরোনাম বিন্যাস

শিরোনাম অধিকাংশ ওয়েব পেজে সাধারণ। প্রকৃতপক্ষে, বেশিরভাগ পাঠ্য নথির অন্তত একটি শিরোনাম থাকে যাতে আপনি যা পড়ছেন তার শিরোনামটি জানেন। এই শিরোনাম HTML শিরোনাম উপাদানগুলি ব্যবহার করে কোডেড করা হয় - h1, h2, h3, h4, h5, এবং h6।

কিছু কিছু সাইটগুলিতে, আপনি এই উপাদানের ব্যবহার না করে শিরোনামগুলি কোডেড করেছেন। পরিবর্তে, শিরোনামগুলি নির্দিষ্ট শ্রেণিবদ্ধ গুণাবলীগুলির সাথে অনুচ্ছেদগুলি ব্যবহার করতে পারে, বা ক্লাস উপাদানগুলির সাথে বিভাগগুলি ব্যবহার করতে পারে। এই ভুল অনুশীলন সম্পর্কে আমি প্রায়শই শুনেছি যে ডিজাইনার "শিরোনাম দেখানোর উপায় পছন্দ করে না"। ডিফল্টরূপে, শিরোনামগুলি গাঢ়ভাবে প্রদর্শিত হয় এবং তারা আকারে বড়, বিশেষ করে H1 এবং H2 উপাদানের যা পৃষ্ঠার অন্যান্য অংশের চেয়ে অনেক বড় ফন্ট আকারে প্রদর্শিত হয়। মনে রাখবেন এই উপাদানগুলি শুধুমাত্র ডিফল্ট চেহারা! সিএসএস দিয়ে, আপনি শিরোনাম চেহারা করতে পারেন তবে আপনি চান! আপনি ফন্ট আকার পরিবর্তন করতে পারেন, সাহসী অপসারণ, এবং আরও অনেক কিছু। শিরোনাম একটি পৃষ্ঠার শিরোনাম কোড করার সঠিক উপায়। এখানে কিছু কারণ কেন।

কেন DIVs এবং স্টাইলিং চেয়ে শিরোনাম ট্যাগ ব্যবহার করুন

শিরোনাম ট্যাগ মত সার্চ ইঞ্জিন

শিরোনাম ব্যবহার করার জন্য এটি সর্বোত্তম কারণ এবং যথাযথ ক্রম (যেমন h1, h2, তারপর h3, ইত্যাদি) ব্যবহার করুন। সার্চ ইঞ্জিন শিরোনামগুলির মধ্যে অন্তর্ভুক্ত পাঠ্যকে সর্বোচ্চ ওজন প্রদান করে কারণ এই পাঠ্যের একটি অর্থাত্ত্বিক মান রয়েছে। অন্য কথায়, আপনার পৃষ্ঠার শিরোনাম H1 লেবেল করে, আপনি সার্চ ইঞ্জিন স্পাইডারকে বলুন যে এটি # পৃষ্ঠার ফোকাস। H2 শিরোনাম # 2 জোর আছে, এবং তাই।

আপনি আপনার শিরোনাম সংজ্ঞায়িত করতে ব্যবহৃত ক্লাস আপনি মনে রাখতে হবে না

যখন আপনি জানেন যে আপনার সমস্ত ওয়েব পৃষ্ঠাগুলিতে একটি H1 রয়েছে যা সাহসী, ২ য় এবং হলুদ, তখন আপনি আপনার স্টাইলশীটে একবার এটি সংজ্ঞায়িত করতে এবং সম্পন্ন করতে পারেন। 6 মাস পরে, যখন আপনি অন্য পৃষ্ঠা যুক্ত করছেন, তখন আপনার পৃষ্ঠার শীর্ষে একটি H1 ট্যাগ যুক্ত করুন, আপনি কী স্টাইল আইডি বা ক্লাসটি প্রধান হিসাবে সংজ্ঞায়িত করতে ব্যবহৃত তা খুঁজে পেতে আপনাকে অন্য পৃষ্ঠাগুলিতে ফিরে যেতে হবে না। শিরোনাম এবং উপ-মাথা।

তারা একটি শক্তিশালী পৃষ্ঠা রূপরেখা প্রদান

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

আপনার পৃষ্ঠা এমনকি স্টাইল বন্ধ সঙ্গে সংবেদনশীল করতে হবে

সবাই স্টাইল শীট দেখতে বা ব্যবহার করতে পারে না (এবং এটি # 1 ফিরে আসে - সার্চ ইঞ্জিনগুলি আপনার পৃষ্ঠার সামগ্রী (পাঠ্য) দেখতে, স্টাইল শীট নয়)। আপনি শিরোনাম ট্যাগগুলি ব্যবহার করলে, আপনি আপনার পৃষ্ঠাগুলিকে আরও অ্যাক্সেসযোগ্য করে তুলছেন কারণ শিরোনামগুলি এমন তথ্য সরবরাহ করে যা একটি DIV ট্যাগ করবে না।

এটি স্ক্রিন রিডার এবং ওয়েবসাইট অ্যাক্সেসিবিলিটির জন্য সহায়ক

শিরোনামের যথাযথ ব্যবহার একটি নথির জন্য একটি যৌক্তিক গঠন তৈরি করে। এই স্ক্রিন পাঠকরা দৃষ্টিভঙ্গিহীন ব্যবহারকারীর কাছে কোনও সাইটটি "পড়তে" ব্যবহার করবে, যা আপনার সাইটকে প্রতিবন্ধী ব্যক্তিদের কাছে অ্যাক্সেসযোগ্য করে তোলে।

আপনার শিরোনাম টেক্সট এবং ফন্ট স্টাইল

শিরোনামের ট্যাগগুলির "বড়, গাঢ়, এবং কুৎসিত" সমস্যা থেকে দূরে সরে যাওয়ার সবচেয়ে সহজ উপায়টি হল পাঠ্যটিকে আপনি যেভাবে দেখতে চান তা শৈলী হিসাবে সাজানো। আসলে, কোনও নতুন ওয়েবসাইটে কাজ করার সময়, প্রথমটি অনুচ্ছেদ, এইচ 1, এইচ 2, এবং এইচ 3 স্টাইলগুলি প্রথম জিনিসটি লিখতে ভাল। শুধু ফন্ট পরিবার এবং আকার / ওজন সঙ্গে লাঠি। উদাহরণস্বরূপ, এটি একটি নতুন সাইটের জন্য একটি প্রাথমিক স্টাইল শীট হতে পারে (এটি ব্যবহার করা যেতে পারে এমন কিছু উদাহরণ শৈলী):

আপনি আপনার শিরোনামের ফন্টগুলি সংশোধন করতে পারেন বা পাঠ্য শৈলী বা এমনকি পাঠ্যের রঙ পরিবর্তন করতে পারেন। এই সব আপনার "কুৎসিত" শিরোনাম আরো স্পন্দনশীল কিছু এবং আপনার নকশা সঙ্গে পালন করা হবে।

সীমানা শিরোনাম আপ পোষাক করতে পারেন

সীমানা আপনার শিরোনাম উন্নত এবং একটি সহজ যোগ করার জন্য একটি দুর্দান্ত উপায়। তবে সীমানাগুলির সাথে পরীক্ষা করতে ভুলবেন না - আপনার শিরোনামের প্রতিটি পাশে সীমানা লাগবে না। এবং আপনি শুধু প্লেইন বিরক্তিকর সীমানা বেশী ব্যবহার করতে পারেন।

আমি কিছু আকর্ষণীয় চাক্ষুষ শৈলী পরিচয় করিয়ে আমার নমুনা শিরোনাম একটি শীর্ষ এবং নীচে সীমানা যোগ করা। আপনি চান যে নকশা শৈলী অর্জন করতে চান যে কোন ভাবে সীমানা যোগ করতে পারে।

এমনকি আরও Pizazz জন্য আপনার শিরোনাম পৃষ্ঠভূমি ইমেজ যোগ করুন

অনেক ওয়েব সাইটগুলির পৃষ্ঠার শীর্ষে শিরোনাম বিভাগ রয়েছে যা একটি শিরোনাম অন্তর্ভুক্ত করে - সাধারণত সাইট শিরোনাম এবং গ্রাফিক। বেশিরভাগ ডিজাইনার এই দুটি পৃথক উপাদান হিসাবে মনে করেন, তবে আপনাকে তা করতে হবে না। যদি গ্রাফিক কেবল শিরোনাম সাজাইয়া থাকে তবে কেন শিরোনাম শৈলীগুলিতে এটি যুক্ত করবেন না?

এই শিরোনামের কৌশলটি হল যে আমি জানি আমার ছবি 90 পিক্সেল লম্বা। তাই আমি 90px শিরোনামের নীচে প্যাডিং যোগ করেছি (প্যাডিং: 0.5 0 90px 0p;)। আপনি যেখানেই চান সেখানে শিরোনামের পাঠ্য পেতে আপনি মার্জিন, লাইন-উচ্চতা এবং প্যাডিংয়ের সাথে খেলতে পারেন।

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

শিরোনাম মধ্যে ইমেজ প্রতিস্থাপন

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

9/6/17 তারিখে জেরেমি গিরার্ড দ্বারা সম্পাদিত