آموزش کامل HTML و HTML5: تگ های قالب بندی متن(۱)

آموزش کامل HTML و HTML5: تگ های قالب بندی متن(1)Reviewed by محمدرضا on Jan 16Rating: 5.0

با سلام به دوستان عزیز سایت فاب تم

در ادامه ی آموزش کامل HTML و HTML5 میخواهیم به معرفی تگ های قالب بندی متن بپردازیم.

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

در ادامه به معرفی این تگ ها میپردازیم و شما همزمان با ما آن ها را در ویرایشگر خود تایپ کنید و خروجی را در مرورگر مشاهده کنید.

حتما بخوانید: آموزش کامل HTML و HTML5: صفات تگ های HTML

نکته: برای مشاهده ی تگ های معرفی شده در خروجی حتما آن ها را بین دو تگ body قرار دهید.

نکته: برای نوشتن کدهای HTML درون ویرایشگر توجه داشته باشید که Encoding (رمز گذاری) را گزینه Encode in UTF-8 انتخاب کنید تا کلمات فارسی در مرورگر بخوبی نمایش داده شود و برای اینکه در حال نوشتن کدهای زبان HTML هستیم از منوی Language  گزینه H و سپس گزینه HTML را انتخاب کنید.

تگ <b>: هر متنی که در داخل این تگ قرار بگیرد در خروجی به صورت ضخیم نمایش داده میشود.

<p><b>fabtheme</b> bold text</p>

خب حال تغیرات را ذخیره کنید و فایل ذخیره شده که با پسوند html. ذخیره شده است را با مرورگر باز کنید تا نتیجه را مشاهده کنید.

نتیجه کد در مرورگر:

آموزش کامل HTML و HTML5: تگ های قالب بندی متن(1)

تگ <i>: این تگ متن موجود را مورب یا italic نمایش می هد، در مثال زیر ما متن فاب تم را به صورت مورب نمایش میدهیم.

<p><i>fabtheme</i> bold text</p>

نتیجه کد در مرورگر:

آموزش کامل HTML و HTML5: تگ های قالب بندی متن(1)

تگ <u>: متن موجود در این تگ حاوی زیر خط یا underline است.

<p><u>fabtheme</u> bold text</p>

نتیجه کد در مرورگر:

آموزش کامل HTML و HTML5: تگ های قالب بندی متن(1)

تگ <s> و <strike> : این تگ هم  متن موجود را به صورت خط خورده نمایش میدهد.

<p><s>fabtheme</s> bold text</p>

نتیجه کد در مرورگر:

آموزش کامل HTML و HTML5: تگ های قالب بندی متن(1)

تگ <sup> : این تگ هم متن مورد نظر را بصورت بالا نویس نمایش می دهد که معمولا بالانویس ها به اندازه ی نصف ارتفاع یک کاراکتر بالاتر از بقیه کارکترها قرار میگیرند و کمی هم کوچکتر هستند.

<p><b>Fabtheme:</b><sup>این یک متن بالا نویس است</sup></p>

نتیجه کد در مرورگر:

آموزش کامل HTML و HTML5: تگ های قالب بندی متن(1)

تگ <sub> : این تگ متن مورد نظر را بصورت زیر نویس نمایش می دهد که معمولا برخلاف بالانویس ها به اندازه ی نصف ارتفاع یک کاراکتر پایینتراز بقیه کارکترها قرار میگیرند و کمی هم کوچکتر هستند.

<p><b>Fabtheme:</b><sub>این یک متن بالا نویس است</sub></p>

نتیجه کد در مرورگر:

آموزش کامل HTML و HTML5: تگ های قالب بندی متن(1)

تگ <abbr> و <acronym> : از این دو تگ برای نشان دادن متن کامل یک کلمه ی مختصر استفاده میشود بصورتی که وقتی شما را ماوس روی آن متن مختصر می روید متن کامل آن نمایش داده میشود. این تگ ها هر دو صفت title را میگیرند و مقدار title برابر متن کامل است.

<p><b>Fabtheme:</b><abbr title='Hyper Text Markup Language'>HTML</abbr></p>

نتیجه کد در مرورگر:

آموزش کامل HTML و HTML5: تگ های قالب بندی متن(1)

موفق باشید…

Html Html5 آموزش طراحی رابط کاربری

دیدگاه خود را بیان کنید