দেখে মনে হচ্ছে যে এখানে কয়েকটি আলাদা কৌশল রয়েছে, সুতরাং আমি এটি সম্পর্কে একটি "নির্দিষ্ট" উত্তর পাওয়ার আশা করছিলাম ...
কোনও ওয়েবসাইটে, হোমপৃষ্ঠায় লিঙ্কযুক্ত একটি লোগো তৈরি করা সাধারণ অভ্যাস। সার্চ ইঞ্জিন, স্ক্রিন রিডার, আই 6+ এবং ব্রাউজার যারা সিএসএস এবং / অথবা চিত্রগুলিকে অক্ষম করেছেন তাদের জন্য সর্বোত্তম অনুকূলকরণের সময় আমিও এটি করতে চাই।
প্রথম উদাহরণ: এইচ 1 ট্যাগ ব্যবহার করে না। এসইও হিসাবে ভাল না, তাই না?
<div id="logo">
<a href="">
<img src="logo.png" alt="Stack Overflow" />
</a>
</div>
উদাহরণ দুটি: এটি কোথাও পাওয়া গেছে। সিএসএসকে কিছুটা হ্যাকি মনে হচ্ছে।
<h1 id="logo">
<a href="">Stack Overflow</a>
</h1>/* css */
#logo {
padding: 70px 0 0 0;
overflow: hidden;
background-image: url("logo.png");
background-repeat: no-repeat;
height: 0px !important;
height /**/:70px;
}উদাহরণ তিনটি: একই HTML, পাঠ্য-ইনডেন্ট ব্যবহার করে ভিন্ন পদ্ধতি। এটি চিত্র প্রতিস্থাপনের জন্য "ফার্ক" পদ্ধতি "
<h1 id="logo">
<a href="">Stack Overflow</a>
</h1>/* css */
#logo {
background: transparent url("logo.png") no-repeat scroll 0% 0%;
width: 250px;
height: 70px;
text-indent: -3333px;
border: 0;
margin: 0;
}
#logo a {
display: block;
width: 280px; /* larger than actual image? */
height: 120px;
text-decoration: none;
border: 0;
}উদাহরণ চার: লিহ্যা-ল্যাংগ্রিজ-জেফারি পদ্ধতি । চিত্রগুলি এবং / অথবা সিএসএস বন্ধ থাকা অবস্থায় প্রদর্শিত হয়।
<h1 id="logo" class="logo">
<a href="">Stack Overflow</a>
</h1>/* css */
h1.logo {
margin-top: 15px; /* for this particular site, set this as you like */
position: relative; /* allows child element to be placed positioned wrt this one */
overflow:hidden; /* don’t let content leak beyond the header - not needed as height of anchor will cover whole header */
padding: 0; /* needed to counter the reset/default styles */
}
h1.logo a {
position: absolute; /* defaults to top:0, left:0 and so these can be left out */
height: 0; /* hiding text, prevent it peaking out */
width: 100%; /* 686px; fill the parent element */
background-position: left top;
background-repeat: no-repeat;
}
h1#logo {
height: 60px; /* height of replacement image */
}
h1#logo a {
padding-top: 60px; /* height of the replacement image */
background-image: url("logo.png"); /* the replacement image */
}এই ধরণের জিনিসটির জন্য কোন পদ্ধতিটি সেরা? দয়া করে আপনার উত্তরে এইচটিএমএল এবং সিএসএস সরবরাহ করুন।
titleবৈশিষ্ট্যটি কি এর মধ্যে থাকা উচিত নয় <a>?