خانه آموزش HTML آموزش تگ های HTML آموزش تگ b در HTML

آموزش تگ b در HTML

توسط

۱۳۹۷-۱۱-۲۹

آموزش تگ b در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ b در HTML با من همراه باشید.

آموزش تگ b در HTML

Free-Learn

در این جلسه میخوانیم

1 تگ b در HTML
2 مثال از تگ b در HTML
3 پشتیبانی مرورگرها
4 پشتیبانی از صفات و رویدادهای عمومی
5 نکات و توضیحات
6 دستورات CSS پیش فرض

تگ b در HTML

تگ b تگی است که با استفاده از آن میتوان یک متن را بصورت برجسته یا جسورانه یا در واقع همون bold شده ایجاد و به نمایش گذاشت.

تگ b در دسته ی تگ های فرمت بندی یا قالب بندی متن ها در HTML می باشد، فرمت بندی یا قالب بندی یعنی اینکه ما با استفاده از این تگ ها میتونیم با متن ها کار کنیم. (مثلا یک متن را کج کنیم یا مثلا یک متن را زیرش خط بکشیم و..)

تگ b که گفتیم میاد و هرچیزی (متن) که بینش قرار بگیرد را بصورت پررنگ یا بولد شده نمایش میدهد ولی ما یک تگ دیگه هم داریم به اسم Strong که اونم دقیقا میاد و متن درونش رو پررنگ و بولد شده به نمایش میگذارد؟!

خب حالا سوال اینه !؟ که فرق این دوتا تگ یعنی تگ b با تگ Strong در چیه؟ آیا اصلا فرقی دارند؟

پاسخ : بله که فرق دارند، تگ b میاد و یک متن را بصورت بولد شده نمایش میدهد فقط همین و تمام شد رفت ولی تگ strong متنی که درش قرار میگیرد را بصورت بولد شده نمایش میدهد (دقیقا مثه تگ b) ولی در معنا برای مرورگر فرق میکنه.

ادامه پاسخ : از این بابت فرق میکنه که، متنی که درون تگ strong قرار میگیرد برای مرورگر یه متن مهم و با ارزش محتوایی حساب می شود ولی متنی که درون تگ b قرار میگیرد برای مرورگر فقط یه متن ساده هست که بولد شده یا پررنگ شده است فقط همین.

تگ <strong> در ظاهر همانند تگ <b> می باشد ولی در معنا برای مرورگر کاملا باهمدیگر فرق میکنند.

Free-Learn

مثال از تگ b در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

<body>

<p>Hi, My Name Is <b>Sadegh Asadi</b> What's Your Name? </p> 

</body>

<body>

<p>Hi, My Name Is <b>Sadegh Asadi</b> What's Your Name? </p>

</body>

امتحان کنید

مثال شماره ۲ : سفارشی سازی تگ b با استفاده از دستورات CSS

<!DOCTYPE html>
<html>
<head>
<style>
b{
 background-color:#f2f2f2;
 padding:5px;
 border-bottom:2px solid #2196F3;
 color:#2196F3;
}
</style>
</head>
<body>

<p>Hi, My Name Is <b>Sadegh Asadi</b> What's Your Name? </p> 

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

background-color:#f2f2f2;

padding:5px;

border-bottom:2px solid #2196F3;

color:#2196F3;

}

</style>

</head>

<body>

<p>Hi, My Name Is <b>Sadegh Asadi</b> What's Your Name? </p>

</body>

</html>

امتحان کنید

مثال شماره ۳ : سفارشی سازی تگ b با استفاده از دستورات CSS

<!DOCTYPE html>
<html>
<head>
<style>
b.my_b{
 background-color:#f2f2f2;
 padding:5px;
 border:2px solid #607D8B;
 color:#2196F3;
 box-shadow: 0 2px 1px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3);
}
b.my_b:hover{
 color:black;
 border:2px solid #F44336;
}
</style>
</head>
<body>

<p>Hi, My Name Is <b class="my_b">Sadegh Asadi</b> What's Your Name? </p> 

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

b.my_b{

background-color:#f2f2f2;

padding:5px;

border:2px solid #607D8B;

color:#2196F3;

box-shadow: 0 2px 1px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3);

}

b.my_b:hover{

color:black;

border:2px solid #F44336;

}

</style>

</head>

<body>

<p>Hi, My Name Is <b class="my_b">Sadegh Asadi</b> What's Your Name? </p>

</body>

</html>

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ b در HTML پشتیبانی میکنند یا خیر.

نام مرورگر	Chrome	Firefox	Opera	Safari	IE
پشتیبانی	بله	بله	بله	بله	بله

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ b از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

برای بهنیه بودن محتوا و مطالب تان سعی کنید الکی همینجور بی هدف از تگ b استفاده نکنید، همونطور که گفتم این تگ میاد و یک متن رو بصورت پررنگ یا بولد شده نمایش میدهد بدون هیچ گونه ارزش محتوایی.

حال HTML5 میگه اگر میخواهید در محتواتون از تگ های تیتر یا هدینگ استفاده نمایید باید از تگ های تیتر (H1-H6) استفاده نماید و اگر میخواهید متنی را بصورت بولد شده و با ارزش محتوایی بالا ایجاد کنید باید از تگ strong استفاده نمایید.

یا مثلا اگر میخواهید یک متن را بصورت هایلایت یا مارک شده ایجاد نمایید باید از تگ mark استفاده نمایید و دیگر تگ های قالب بندی متن ها که در اینجا آنها را آموزش دادم.

پس در کل داره میگه که شما باید از تگ های قالب بندی متناسب با اون کاری که میخواهید استفاده نمایید و استفاده نامناسب از آنها میتونه به سئوی سایت شما ضربه بزنه.

Free-Learn

دستورات CSS پیش فرض

معمولا مرورگرها تگ b را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.

b {
  font-weight: bold;
}

b {

font-weight: bold;

}