بنام خدا

برای شکل دهی (Formatting) یک متن در HTML مانند برجسته کردن (bold)، اریب کردن (italic) و غیره می توان از تگ های مربوط به هر یک استفاده کرد که در ادامه با هر یک آشنا می شویم.

عناصر برجسته سازی متن b و strong

از تگ باز و بسته b برای برجسته کردن یک متن استفاده می شود. متنی که بدون هرگونه اهمیت اضافی است.
تگ strong هم مانند b عمل می کند با این تفاوت که نسخه جدیدتر اچ تی ام ال یعنی XHTML بدلیل مشخص بودن معنای strong به معنای «قوی» و تاکید روشنتر آن نسبت به b که تنها یک حرف است، این تگ را پیشنهاد می دهد.
به مثال های زیر از b و strong دقت کنید:

 <!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>

<b>این یک جمله برجسته است</b>
<strong>این هم یک جمله برجسته با تاکید روشنتر است</strong>

</body>
</html>
نتیجه کد:
این یک جمله برجسته است
این هم یک جمله برجسته با تاکید روشنتر است

عناصر i و em

این دو عنصر هم شبیه هم عمل می کنند و متن را به صورت کج، اریب یا ایتالیک (italic) نمایش می دهند.
درست مانند بحث قبلی، تگ em دارای تاکید بیشتری نسبت به i است و علاوه بر اریب کردن متن، اهمیت آن را هم نشان می دهد.
به مثال های زیر توجه کنید:

 <!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>

<i>این یک جمله اریب است</i>
<em>این هم یک جمله اریب با تاکید بر اهمیت است</em>

</body>
</html>
نتیجه کد:
این یک جمله اریب است
این هم یک جمله اریب با تاکید بر اهمیت است

عنصر small

عنصر small با توجه به معنای آن یعنی «کوچک» کلمه یا جمله ای از یک متن را نسبت به اندازه ی بقیه کوچکتر نشان می دهد.
به مثال زیر توجه کنید.

 <!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>

کلمه <small>سیب</small> در این متن از بقیه کوچکتر است.

</body>
</html>
نتیجه کد:
کلمه سیب در این متن از بقیه کوچکتر است.

عنصر mark

حتما با ماژیک هایلایت کلمات یا جملات کلیدی در کتاب خود را برجسته کرده اید. عنصر mark که به معنی «علامت دار کردن» است، دقیقا همین کار را با کلمات و جملات می کند و رنگ آن به طور پیشفرض تقریبا در همه مرورگرها زرد رنگ است.
به مثال زیر توجه کنید:

 <!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>

در این متن عبارت <mark>بابا آب داد</mark> هایلایت شده است.

</body>
</html>
نتیجه کد:
در این متن عبارت بابا آب داد هایلایت شده است.

عنصر del

اگر بخواهیم کلمه یا عبارتی در یک متن را ویرایش یا حذف شده نشان دهیم، از عنصر del که مخفف delete است استفاده می کنیم.
این عنصر روی کلمه مورد نظر به عنوان کلمه غلط یا حذف شده یک خط می کشد.
به مثال زیر توجه کنید:

 <!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>

رنگ آسمان <del>سبز</del> آبی است.

</body>
</html>
نتیجه کد:
رنگ آسمان سبز آبی است.

عنصر ins

برای اینکه واژه یا جمله ای را در یک متن به صورت زیر خط دار (underline) نشان دهیم، از عنصر ins که مخفف inserted به معنای «قرار داده شده» است، استفاده می کنیم. یعنی کلمه ای در متن و روی خط قرار داده شده است.
به مثال زیر توجه کنید:

 <!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>

<ins>مرداد</ins> از گرمترین ماه های سال است.

</body>
</html>
نتیجه کد:
مرداد از گرمترین ماه های سال است.

عناصر sub و sup

برای اینکه یک عبارت را به صورت بالانویس (مانند توان عدد) و پایین نویس قرار دهیم، از sup مخفف superscript و sub مخفف subscript استفاده می کنیم.
به مثال های زیر توجه کنید:

 <!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>

عبارت <sup>آسمان</sup> به صورت بالانویس آمده است. همچنین نتیجه ۲<sup>۲</sup> می شود چهار.
عبارت <sub>زمین</sub> به صورت پایین نویس آمده است.

</body>
</html>
نتیجه کد:
عبارت آسمان به صورت بالانویس آمده است. همچنین نتیجه ۲۲ می شود چهار.
عبارت زمین به صورت پایین نویس آمده است.

حالا وقت تمرینه!

 

اینفوگرافی

دستور انگلیسی

آیا می دانید؟

لغات 504

مکالمات انگلیسی

اصطلاحات انگلیسی





عضویت در خبرنامه

با عضویت در خبرنامه، از آخرین آموزش ها، محصولات و تخفیف های بابا آب داد مطلع شوید.

یا برای اطلاع می توانید در هر یک از کانال های زیر در تلگرام، گپ و ایتا به آی دی babaabdadchannel@ عضو شوید:

گپ تلگرام ایتا

آموزش HTML ؛ درس هشتم: شکل دهی متن

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *