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

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۲۵ شهریور ۱۳۹۱

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

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

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

نکته :

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

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

<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. ذخیره کنید.

ذخیره فایل html

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

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

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

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

تگ <italic>

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

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

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

تگ <u>

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

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

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

تگ <s> و <strike>

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

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

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

تگ <sup>

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

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

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

تگ <sub>

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

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

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

تگ <big>

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

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

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

تگ <small>

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

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

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

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

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

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

تگ <abbr>

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

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

محمّد حسن مهرآذر

سلام من فکر می کردم خیلی سخته ولی اینطوری ها هم نیست به نظر من زبان HTML زبان شیرینیه 😀

کیوان علی محمدی

بله اگه مخصوصا اگه علاقه شدید هم داشته باشی واقعا کد نویسی همیشه شیرینه.

رضا

با سلام چه جوری میشه موقع ساختن لینک رنگ لینک رو از آبی مثلا به قهوه ای تغییر داد ❓
ممنون میشم اگه جواب بدید

کیوان علی محمدی

سلام کافیه توی فایل css برای تگ a ویژگی color رو برابر رنگ قهوه ای (#C90) قرار بدید.

azad1top

😳

مهدی

سلام میشه بفرمایید تگ acronym به چه معناست

لقمان آوند

برای نمایش خلاصه ی یک عبارت استفاده میشه و در وب معنایی می تونه مفید باشه . مثلا :
Can I get this ASAP?

golden-vpn

khyelii alli bod amozesh haton faqta ye irad asasi ke dare kareton ine ke vaqti mikhaym maqale ro dl kunim faqat on safhei ke toshim dl mishe
yani man alan safhe 2 hastam va faqat in safhe ro dl mikune va safhe 1 *3va4 dl nemishe ke khodesh kuli azyat mikune.. manam majbor shdoam dg ax begiram az har safhe ke rahat to systemam bashe
rasti chera khodeton link mostaqim nemizarid ke fast dl kune vaqti rosh click kardim??
injori ye panjere kochik baz mishe o kuli azyat mishim.. yeki az nokate karbar madari bod ina ke baes mishe to jashnvare ray e bishtari biarin
bazam kheyli mamnon ke in amozesh haro mizarid in bozorg del bodaneton neshon mide ke to amokhtan khasis nistin maqalateton ro ke moikhonam kheyli rahat tar az kelas haye ostda mifahmam.. mamulan to kelas behtar mifahman ma inja behtar mifahmim bas ke ravoon va baz o rahat dore haro pish mibarin
tnx aziz.

لقمان آوند

متشکرم از ابراز لطفتون …
برای pdf هم ابزاری که گذاشتیم خودکار pdf میسازه و برامون خیلی زمانگیره که بخوایم جداگانه فایل pdf مطلب رو بسازیم و آپلود کنیم و …
البته این مشکل برای مطالب چند صفحه ای هست . سرم خلوت شد حتما یه فکری به حال این موضوع می کنم . شاید لینکو به صفحه ی دیگه ای از سایت دادیم که مطلب کامل اونجا باشه و اونجا بتونید pdf کاملشو بگیرید …

مریم

با عرض خسته نباشید من در رابطه با فارسی کردن کلمات پاراگراف مشکل دارم طبق گفته شما(منوی Encoding (رمز گذاری) گزینه Encode in UTF-8 را انتخاب کنید) عمل کردم اما نشد میشه راهنمایی کنید

لقمان آوند

از تگ متای زیر در صفحه html خود استفاده کنید :

 &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
مریم

خیلی ممنون

MR.Ali

آقا انگار مشخص نشد تو پست قبلی
تگ p رو نبستین 🙄 😉

سجاد دریس

سلام.
ممنون بابت تذکر. کد اصلاح شد.
درمورد آموزش css هم چشم. بعد از تمام کردن آموزش html ، آموزش css هم قرار داده میشه.

MR.Ali

دست شما به خاطر آموزش خوبتون درد نکنه من که دارم پیش میرم بهاتون 😀
امیدوارم بعد از این آموزش css رو هم بعد از این حتما یاد بدید که آموزشش ابتر نشه 😉

فقط یه نکته اونم اینکه در این صفحه ی 4 کدش مشکل داره و شما

learn Html

و رو نبستین 😀

بازم تشکر و سی اس اسم فراموش نشه 😆

لقمان آوند

ممنون عزیز …
بسته شد !

هومن

سلام وب سایت خوبی دارید خوش حال می شم به وب سایت من هم سر بزنید موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.