در ادامه مقالات آموزش زبان HTML در این مقاله می خواهیم نحوه نوشتن متن های مورب و ضخیم را بررسی کنیم.رای متمایز نمودن یک نوشته از سایر کلمات در html، از تگ های خاصی استفاده می شود، برای متون برجسته از <b> و برای متون کج یا italic از <i>استفاده می شود، اما چیزی به نام html semantic یا معنایی وجود دارد که توصیه می کند به جای استفاده از این تگ ها به عنوان استایل متن، از <strong> و <em> استفاده کنیم.استفاده از این تگ های باعث می شود که توجه موتورهای جستجوی به کلمات موجود داخل این تگ جلب شود و در بحث سئو و رتبه بندی سایت از اهمیت ویژه ای برخوردار می باشند.در ادامه با مثال های به بررسی تگ های <b>,<i>,<u>,<strike>,<strong>,<em> خواهیم پرداخت.
تگ <b>
این تگ باعث می شود کلماتی که بین این تگ و تگ پایانی آن قرار دارند به صورت پر رنگ و بولد (Bold) دیده شوند. به مثال زیر توجه کنید
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”/>
<title>پیشگامان صفر و یک فرساد</title>
</head>
<body>
<b>این متن به صورت تو پر نمایش داده می شود</b>
</body>
</html>
خروجی مثال بالا در مرورگر:
تگ <i>
استفاده از این تگ باعث می شود کلماتی که بین تگ باز و بسته آن قرار دارند به صورت مورب نمایش داده شوند. به مثال زیر توجه کنید:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”/>
<title>پیشگامان صفر و یک فرساد</title>
</head>
<body>
<i>این متن به صورت مورب نمایش داده می شود</i>
</body>
</html>
خروجی مثال بالا در مرورگر:
تگ <u>
استفاده از این تگ باعث می شود کلماتی که بین تگ باز و بسته آن قرار دارند به صورت زیرخط دار نمایش داده شوند. استفاده از این تگ در HTML 4.1 منسوخ شده اما در HTML 5 این تگ با کمی تفاوت به لحاظ معنایی مورد استفاده قرار گرفت.در HTML5 این تگ برای نمایش متونی استفاده می شود که به لحاظ سبک نگارش از سایر متون صفحه متفاوت می باشند.به عنوان مثال برای نمایش غلط های املایی در یک متن می توانید از این تگ استفاده کنید.نحوه استفاده از این تگ به صورت زیر می باشد:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”/>
<title>پیشگامان صفر و یک فرساد</title>
</head>
<body>
<p >این متن دارای <u>قلط املایی</u> می باشد .</p>
</body>
</html>
خروجی قطعه کد بالا در مرورگر:
تگ <strike>
استفاده از این تگ باعث می شود کلماتی که بین تگ باز و بسته آن قرار دارند به صورت خط خورده نمایش داده شوند. به مثال زیر توجه کنید
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”/>
<title>پیشگامان صفر و یک فرساد</title>
</head>
<body>
<strike>خطی روی این متن کشیده می شود</strike>
</body>
</html>
خروجی قطعه کد بالا در مرورگر:
تگ <strong>
وقتی می خواهیم سئو و بهینه سازی قوی در متن مقاله یا تاکید قوی روی متن داشته باشیم، از تگ strong استفاده می کنیم. المان strong نشان دهنده اهمیت، جدیت و اضطرار زیاد است و به صورت توپر نمایش داده می شود هنگامی که موتورهای جستجو با تگ strong در HTML مواجه می شوند به آن متن اهمیت بیشتری می دهند. .نحوه استفاده از این تگ به صورت زیر می باشد:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”/>
<title>پیشگامان صفر و یک فرساد</title>
</head>
<body>
<p>شرکت پیشگامان صفر و یک فرساد با استفاده از جدیدترین تکنولوژی های روز دنیا اقدام به <strong>طراحی سایت</strong> برای مشتریان خود می کند</p>
</body>
</html>
خروجی قطعه کد بالا در مرورگر:
تگ <em>
تگ em تنها متن را به صورت ایتالیک در نمی آورد! آنچه که شما مشاهده می کنید متنی است که با فونت ایتالیک نوشته شده است اما مانند تگ strong هنگامی که موتورهای جستجو با تگ em نیز در HTML مواجه می شوند به آن متن اهمیت بیشتری می دهند. به مثال زیر توجه کنید:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”/>
<title>پیشگامان صفر و یک فرساد</title>
</head>
<body>
<p>تیم برنامه نویس شرکت پیشگامان صفر و یک فرساد با برگزاری کلاس های <em style="color:red">آموزش برنامه نویسی</em> سعی می کند تا نیروهای جدید و کارآمدی را روانه بازار کار بکند.</p>
</body>
</html>
خروجی قطعه کد بالا در مرورگر:
در این مثال متن موجود در تگ em را به رنگ قرمز در آوردیم تا تمایز آن در عکس بهتر نمایش داده شود.
شما می توانید این تگ ها را به صورت تودرتو نیز استفاده کنید. مثلاً وقتی که می خواهید متنی به صورت پر رنگ و کج نوشته شود. برای این کار هر دو تگ ابتدایی را برای متن در ابتدای آن و تگهای پایانی را در جایی که می خواهیم پایان پر رنگی و کجی متن باشد قرار می دهیم.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”/>
<title>پیشگامان صفر و یک فرساد</title>
</head>
<body>
<b><i>این متن به صورت کج و پر رنگ دیده می شود</i></b>
</body>
</html>
خروجی قطعه کد بالا در مرورگر:
امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه مقالات آموزش زبان HTML با ما همراه باشید.
نویسنده مقاله کامنت گذاری را غیر فعال کرده است.