خانه / مقالات اموزشی / html / آموزش تگ های html
آموزش HTML5
آموزش HTML5

آموزش تگ های html

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

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

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

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

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

” در صفحه به صورت ضخیم نمایش داده خواهد شد:

 نکته : برای نوشتن کدهای Html در نرم افزار Notepad++ بهتر است به نکات زیر دقت کنید:

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

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

1x1.trans آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)

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

1x1.trans آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)

 

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

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

1x1.trans آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)

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

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

1x1.trans آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)

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

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

 

 

1x1.trans آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)

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

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

1x1.trans آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)

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

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

1x1.trans آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)

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

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

1x1.trans آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)

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

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

1x1.trans آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)

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

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

1x1.trans آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)

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

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

1x1.trans آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه اول)

بسیار خب . تا اینجا با ۱۰ تگ برای قالب بندی متون در html آشنا شدیم. در جلسه دوم با بقیه تگ های قالب بندی آشنا خواهیم شد.

 

 

منبع : ۷learn

درباره آموزشگاه نوین آی تی

همچنین ببینید

آموزش برنامه نویسی جاوا

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

دیدگاهتان را بنویسید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net