تگ های قالب بندی متن

 

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

آشنایی با انواع تگ های قالب بندی متن

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

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

تگ <b>: متن داخل یک عنصر b در صفحه به صورت ضخیم نمایش داده خواهد شد. در کد زیر عبارت "7Lrean.com" در صفحه به صورت ضخیم نمایش داده خواهد شد:

1 <p><b>7Learn.com :<b> Web Design Javascript Tutorials<p>
نکته : برای نوشتن کدهای Html در نرم افزار Notepad++ بهتر است به نکات زیر دقت کنید:
  • از منوی Encoding (رمز گذاری) گزینه Encode in UTF-8 را انتخاب کنید تا هنگام تایپ فارسی کلمات به درستی در مرورگر نمایش داده شوند.
  • برای اینکه به برنامه بفهمانیم در حال نوشتن کدهای زبان HTML هستیم از منوی Language  گزینه H و سپس گزینه HTML را انتخاب کنید.

حال بعد از نوشتن کد بالا از منوی file گزینه save را انتخاب نایید. در پنجره ای که باز میشود ابتدا محل ذخیره سازی فایلتان را انتخاب کنید.، سپس در کادر مقابل عبارت file name نام فایل را بنویسید و فایل را با فرمت html. ذخیره کنید.

save file html <a  style=آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)" title="آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول) 7learn.com" width="571" height="423" />

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

bold tag1 <a  style=آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)" title="آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول) 7learn.com" width="380" height="164" />


تگ <i>:  از این تگ برای مورب کردن متن استفاده می شود. کلمه "7Learn.com" در کد زیر در مرورگر به صورت مورب (italic) نمایش داده خواهد شد

1 <p><i>7Learn.com :</i> Web Design Javascript Tutorials</p>

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

italic tag1 <a  style=آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)" title="آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول) 7learn.com" width="380" height="164" />

تگ <u>:  این عنصر محتوای خود را به صورت زیر خط دار(underline) نمایش می دهد. هرچند این عنصر جزء عناصر منسوخ شده به حساب می آید اما هنوز همه مرورگرها از آن به خوبی پشتیبانی می کنند.

1 <p><u>7Learn.com :</u> Web Design Javascript Tutorials</p>

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

underline tag <a  style=آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)" title="آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول) 7learn.com" width="380" height="164" />

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

1 <p><s>7Learn.com :</s> Web Design Javascript Tutorials</p>

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

s strike tag <a  style=آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)" title="آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول) 7learn.com" width="380" height="164" />


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

1 <p>7Learn.com : <sup> Web Design & Javascript Tutorials</sup></p>

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

sup tag <a  style=آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)" title="آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول) 7learn.com" width="380" height="164" />

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

1 <p>7Learn.com : <sub> Web Design & Javascript Tutorials</sub></p>

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

sub tag <a  style=آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)" title="آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول) 7learn.com" width="380" height="164" />

تگ <big> : در نسخه های قدیمی تر HTML، هقت اندازه استاندارد برای متن وجود داشت. عنصر <big> محتوای خود را یک واحد بیشتر از متون اطرافش نمایش می دهد.

1 <p><big>7Learn.com :</big> Web Design Javascript Tutorials</p>

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

big tag <a  style=آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)" title="آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول) 7learn.com" width="380" height="164" />

تگ <small> : این عنصر دقیقا عکس عنصر <big> عمل می کند و محتوایش را یک واحد کوچکتر از متون اطرافش نمایش می دهد.

1 <p><small>7Learn.com :</small> Web Design Javascript Tutorials</p>

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

small tag <a  style=آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)" title="آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول) 7learn.com" width="380" height="164" />

تگ <del> و <ins> : از تگ <del> برای مشخص نمودن تغییراتی که نشان می دهد نویسنده صفحه، محتوایی که از قبل در صفحه موجود بوده است را حذف کرده است، استفاده می شود. این تگ در مقابل تگ <ins> که وظیفه مشخص کردن محتوایی که به تازگی به صفحه اضافه شده است را دارد، قرار میگیرد. تگ <del> موجب نمایش خطی بر روی محتوای خود و تگ <ins>  موجب نمایش زیر خط دار متن محتوای خود می شود.

1 <p><del>7Learn.com :</del> <ins> Web Design Javascript Tutorials</ins></p>

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

del ins tag <a  style=آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)" title="آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول) 7learn.com" width="380" height="164" />


 

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

1 <p> Learn <abbr title='Hyper Text Markup Language'>HTML</abbr></p>

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

abbr tag <a  style=آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)" title="آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول) 7learn.com" width="380" height="164" />

خب تا اینجا با 10 تگ برای قالب بندی متون در html آشنا شده اید. در آموزش های بعدی با بقیه تگ های قالب بندی آشنا خواهیم شد.

ارسال نظر