শিরোনাম সাজাইয়া ফন্ট, সীমানা এবং চিত্র ব্যবহার করুন
সর্বাধিক ওয়েব পেজগুলিতে হেডলাইনগুলি সাধারণ। আসলে, কোনও পাঠ্য নথিটি অন্তত একটি শিরোনাম থাকতে পারে যাতে আপনি যা পড়ছেন তার শিরোনামটি জানতে পারেন। এই শিরোনামগুলি এইচটিএমএল শিরোনাম উপাদানগুলি ব্যবহার করে কোডেড আছে - h1, h2, h3, h4, h5, এবং h6।
কিছু সাইটগুলিতে, আপনি এই উপাদানগুলি ব্যবহার না করেই শিরোনামগুলি কোডেড করতে পারেন। পরিবর্তে, শিরোনাম তাদের সাথে যোগ করা নির্দিষ্ট শ্রেণী গুণাবলীগুলির সাথে অনুচ্ছেদগুলি ব্যবহার করতে পারে বা শ্রেণী উপাদানগুলির সাথে ভাগ করে নিতে পারে। আমি প্রায়ই এই ভুল অনুশীলন সম্পর্কে শুনতে কারণ ডিজাইনার "শিরোনাম দেখান উপায় পছন্দ নয়"। ডিফল্টরূপে, শিরোনামগুলি সাহসী অবস্থায় প্রদর্শিত হয় এবং তারা আকারের আকারে বড় হয়, বিশেষ করে H1 এবং H2 উপাদানের যা পৃষ্ঠার বাকি অংশের তুলনায় অনেক বড় ফন্টের আকার প্রদর্শন করে। মনে রাখবেন এটি শুধুমাত্র এই উপাদানগুলির ডিফল্ট চেহারা! সিএসএস এর সাথে, আপনি চাইলে শিরোনামটি দেখতে পারেন! আপনি ফন্টের আকার পরিবর্তন করতে পারেন, সাহসীটি অপসারণ করুন এবং আরও অনেক কিছু করতে পারেন। শিরোনাম একটি পৃষ্ঠার শিরোনাম কোড সঠিক উপায়। এখানে কেন কিছু কারণ এখানে আছে
কেন ডিভিডি এবং স্টাইলিং তুলনায় শিরোনাম ট্যাগ ব্যবহার করুন
শিরোনাম ট্যাগ মত সার্চ ইঞ্জিন
এই শিরোনাম ব্যবহার করার সবচেয়ে ভাল কারণ, এবং সঠিক ক্রম তাদের ব্যবহার (ie। H1, তারপর H2, তারপর H3, ইত্যাদি)। সার্চ ইঞ্জিনে শিরোনাম ট্যাগগুলির মধ্যে অন্তর্ভুক্ত পাঠ্যের সর্বোচ্চ গুরুত্ব প্রদান করা হয় কারণ এই পাঠ্যের একটি শব্দগত মান রয়েছে অন্য কথায়, আপনার পৃষ্ঠার শিরোনাম H1 লেবেল করে, আপনি সার্চ ইঞ্জিন স্পাইডারকে বলছেন যে এটি পৃষ্ঠাটির # 1 ফোকাস। H2 শিরোনাম # 2 জোর দেওয়া আছে, এবং তাই।
আপনি আপনার শিরোনাম সংজ্ঞায়িত করতে ব্যবহৃত ক্লাসগুলি কি মনে রাখবে না?
যখন আপনি জানেন যে আপনার সমস্ত ওয়েব পৃষ্ঠাগুলি হতাশ হবে, যেটি হোল্ড, 2ম এবং হলুদ হবে, তখন আপনি একবার আপনার স্টাইলশীটটি সংজ্ঞায়িত করতে পারেন এবং সম্পন্ন করতে পারেন। 6 মাস পর, যখন আপনি অন্য পৃষ্ঠা যোগ করছেন, তখন আপনি আপনার পৃষ্ঠার উপরের অংশে H1 ট্যাগ যুক্ত করুন, অন্য কোন পৃষ্ঠায় ফিরে যেতে হবে না তা জানতে আপনি কি শৈলী আইডি বা ক্লাস ব্যবহার করতে চান শিরোনাম এবং উপ মাথা।
তারা একটি শক্তিশালী পৃষ্ঠার রূপরেখা প্রদান করে
আউটলাইন লেখা সহজ পাঠাতে। এজন্যই বেশিরভাগ মার্কিন স্কুল ছাত্রদের কাগজ লেখার আগে একটি সীমারেখা লিখতে শেখায়। যখন আপনি একটি আউটলাইন বিন্যাসে শিরোনাম ট্যাগ ব্যবহার করেন, তখন আপনার পাঠের একটি স্পষ্ট গঠন রয়েছে যা খুব দ্রুত প্রকাশ হয়ে যায় তদ্ব্যতীত, এমন সরঞ্জাম রয়েছে যা একটি সংক্ষিপ্ত বিবরণ প্রদানের জন্য পৃষ্ঠার রূপরেখাটি পর্যালোচনা করতে পারে, এবং এটি সীমারেখা কাঠামোর জন্য শিরোনাম ট্যাগের উপর নির্ভর করে।
আপনার পৃষ্ঠা স্টেজ সঙ্গে বন্ধ এমনকি সঙ্গে জ্ঞান করতে হবে
সবাই স্টাইল শীট দেখতে বা ব্যবহার করতে পারবেন না (এবং এটি # 1- এ ফিরে আসে - সার্চ ইঞ্জিনগুলি আপনার পৃষ্ঠার সামগ্রী (পাঠ্য), স্টাইল শীট নয়) দেখুন। আপনি শিরোনাম ট্যাগ ব্যবহার করলে, আপনি আপনার পৃষ্ঠাগুলিকে আরো অ্যাক্সেসযোগ্য করে তুলতে পারেন কারণ শিরোনাম এমন তথ্য সরবরাহ করে যা একটি DIV ট্যাগ না।
এটি স্ক্রিন পাঠক এবং ওয়েবসাইট অ্যাক্সেসযোগ্যতার জন্য সহায়ক
শিরোনামের যথাযথ ব্যবহার একটি নথিতে একটি লজিক্যাল কাঠামো তৈরি করে। এই স্ক্রিন রিডারগুলি আপনার ব্যবহারকারীকে দৃষ্টিশক্তি দুর্বলতার সাথে একটি সাইটে "পড়" করার জন্য ব্যবহার করবে, যাতে আপনার সাইটের অক্ষম ব্যক্তিদের কাছে অ্যাক্সেস করা যায়।
আপনার শিরোনাম টেক্সট এবং ফন্ট স্টাইল
শিরোনাম শিরোনাম "বড়, গাঢ়, এবং কুশ্রী" সমস্যা থেকে দূরে সরানোর সবচেয়ে সহজ উপায় টেক্সট আপনি তাদের চেহারা চান যে পদ্ধতি শৈলী হয়। আসলে, যখন আমি একটি নতুন ওয়েবসাইটে কাজ করছি, আমি সাধারণত অনুচ্ছেদটি লিখি, h1, h2, এবং h3 শৈলী প্রথম জিনিস। আমি সাধারণত শুধু ফন্ট পরিবার এবং আকার / ওজন সঙ্গে লাঠি। উদাহরণস্বরূপ, এটি একটি নতুন সাইট জন্য একটি প্রাথমিক শৈলী শীট হতে পারে (এই শুধুমাত্র কিছু উদাহরণ শৈলী ব্যবহার করা যেতে পারে):
শরীর, এইচটিএমএল {মার্জিন: 0; প্যাডিং: 0; } পি {ফন্ট: 1em আরিল, জেনেভা, হেলিটিকা, সান-সেরিফ; } h1 {ফন্ট: bold 2em "টাইমস নিউ রোমান", টাইমস, সেরিফ; } h2 {ফন্ট: গাঢ় 1.5ম "টাইমস নিউ রোমান", টাইমস, সেরিফ; } h3 {ফন্ট: বোল্ড 1.2 এম এরিয়েল, জেনেভা, হেল্তুটিকা, সান-সেরিফ; }আপনি আপনার শিরোনাম ফন্ট পরিবর্তন করতে পারেন অথবা টেক্সট শৈলী বা এমনকি টেক্সট রঙ পরিবর্তন করতে পারেন। এই সব আপনার "কুশ্রী" শিরোনাম আরো স্পন্দনশীল এবং আপনার নকশা সঙ্গে রাখার মধ্যে কিছু চালু হবে।
h1 {ফন্ট: গাঢ় তির্যক 2em / 1em "টাইমস নিউ রোমান", "এমএস সেফ", "নিউ ইয়র্ক", সেরিফ; মার্জিন: 0; প্যাডিং: 0; রঙ: # e7ce00; }সীমান্তে হেডলাইনগুলি বসাতে পারেন সীমান্ত
সীমানাগুলি আপনার শিরোনামগুলি উন্নত করার একটি দুর্দান্ত উপায়। এবং সীমানা যোগ করা সহজ। কিন্তু সীমানার সাথে পরীক্ষা করতে ভুলবেন না - আপনার শিরোনামটির প্রতিটি দিকের সীমান্তের প্রয়োজন নেই। এবং আপনি কেবলমাত্র সাধারণ বিরক্তিকর সীমানা ছাড়া আরও ব্যবহার করতে পারেন।
h1 {ফন্ট: গাঢ় তির্যক 2em / 1em "টাইমস নিউ রোমান", "এমএস সেফ", "নিউ ইয়র্ক", সেরিফ; মার্জিন: 0; প্যাডিং: 0; রঙ: # e7ce00; সীমান্তে শীর্ষ: কঠিন # e7ce00 মাঝারি; সীমান্ত-নীচে: বিন্দু # e7ce00 পাতলা; প্রস্থ: 600px; }আমি কিছু আকর্ষণীয় চাক্ষুষ শৈলী প্রবর্তন আমার নমুনা শিরোনাম একটি শীর্ষ এবং নীচের সীমানা যোগ। আপনি যে কোনও ভাবে সীমানা যোগ করতে পারেন যেটি আপনি চাইলে ডিজাইন শৈলী অর্জন করতে চেয়েছিলেন।
আরও বেশি Pizazz জন্য আপনার Headlines থেকে পৃষ্ঠভূমি চিত্র যোগ করুন
অনেক ওয়েব সাইট পৃষ্ঠার শীর্ষে শিরোনাম বিভাগ রয়েছে যা একটি শিরোনাম অন্তর্ভুক্ত করে - সাধারণত সাইট শিরোনাম এবং গ্রাফিক। বেশিরভাগ ডিজাইনার এই দুটি পৃথক উপাদান হিসাবে মনে করেন, কিন্তু আপনার কাছে নেই। যদি গ্রাফিকটি কেবল শিরোনাম সাজানোর জন্য হয় তাহলে কেন শিরোনাম শৈলীতে তা যোগ করবেন না?
h1 {font: bold italic 3em / 1em "টাইমস নিউ রোমান", "এমএস সেফ", "নিউ ইয়র্ক", সেরিফ; পটভূমি: #fff url ("fancyheadline.jpg") পুনরাবৃত্ত-এক্স নীচে; প্যাডিং: 0.5 এম 0 90 পি 0 0; পাঠ্য সাইনইন: কেন্দ্র; মার্জিন: 0; সীমান্ত-নীচে: কঠিন # e7ce00 0.25em; রঙ: # e7ce00; }এই শিরোনামটির কৌতুক হল যে আমি জানি আমার ছবি 90 পিক্সেল লম্বা। তাই আমি 90px (প্যাডিং: 0.5 0 90px 0p;) এর শিরোনাম নীচে প্যাডিং যোগ করা। আপনি যেখানেই চান সেখানে প্রদর্শন করতে শিরোনামটির পাঠ্য পেতে মার্জিন, লাইন-উচ্চতা এবং প্যাডিংয়ের সাথে খেলতে পারেন।
ইমেজ ব্যবহার করার সময় মনে রাখা এক জিনিস হল যে যদি আপনি একটি প্রতিক্রিয়াশীল ওয়েবসাইট (যা আপনি উচিত) পর্দা মাপ এবং ডিভাইসের উপর ভিত্তি করে পরিবর্তন একটি বিন্যাস সঙ্গে, আপনি শিরোনাম সবসময় একই আকার হবে না আপনার শিরোনাম একটি সঠিক আকারের প্রয়োজন হলে, এটি সমস্যা হতে পারে। এটি একটি কারণ যা আমি সাধারণত একটি শিরোনাম মধ্যে পটভূমি ইমেজ এড়ানো হয়, শান্ত হিসাবে তারা কখনও কখনও দেখতে পারেন।
শিরোনাম চিত্র প্রতিস্থাপন
এটি ওয়েব ডিজাইনারদের জন্য আরেকটি জনপ্রিয় টেকনিক কারণ এটি আপনাকে একটি গ্রাফিকাল শিরোনাম তৈরি করতে এবং সেই চিত্রের সাথে শিরোনাম ট্যাগের পাঠ্য প্রতিস্থাপন করতে দেয়। এটি সত্যই একটি ওয়েব ডিজাইনারদের কাছ থেকে একটি প্রাতিষ্ঠানিক অভ্যাস যে খুব কম ফন্টের অ্যাক্সেস আছে এবং তাদের কাজে আরও বিদেশী ফন্ট ব্যবহার করতে চেয়েছিল। ওয়েব ফন্টের উত্থান সত্যিই পরিবর্তিত হয়েছে যেগুলি ডিজাইনাররা স্থানগুলি অনুসরণ করে। এখন হেডলাইনগুলি বিভিন্ন ধরণের ফন্ট এবং ইমেজগুলির মধ্যে স্থাপন করা যাবে যাতে এম্বেডকৃত ফন্টগুলি আর প্রয়োজন নেই। যেমন, আপনি শুধুমাত্র পুরোনো সাইটগুলির শিরোনামগুলির সিএসএস ইমেজ প্রতিস্থাপন পাবেন যা এখনও পর্যন্ত আরও আধুনিক পদ্ধতিতে আপডেট করা হয়নি।
জনিফার ক্রাইনিনের মূল রচনা Jeremy Girard দ্বারা সম্পাদিত 9/6/17