قالب بندی متن ها یا Text Formatting در HTML

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

قالب بندی متن ها یا Text Formatting در HTML

Free-Learn

قالب بندی متن ها یا Text Formatting در HTML

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

بفرض مثال ما نمیتونیم هر کجا که دلمون خواست یه اینتر (Enter) بزنیم و متن رو در سطر بعدی بنویسیم، بلکه باید هر نوع قالب بندی یا متن سفارشی و.. را تحت یکسری تگ یا عنصر در HTML وارد نماییم تا بتوانیم نتیجه درستی را در خروجی داشته باشیم.

بفرض مثال ممکن است بخواهید در متن تان یک کلمه را بولد یا برجسته یا bold کنید و یا مثلا بخواهید یک کلمه را شکسته یا ایتالیک یا italic کنید، یا بخواهید یک کلمه را خط بزنید و دیگر مواردی که در ادامه ی این بخش میخواهیم با آنها آشنا شویم.

یا شاید بخواهید در یک پاراگراف یک سطر را شکسته و به سطر جدید بروید ؟ خب بنظره شما باید چکار کرد؟ وقتی ما اینتر (Enter) بزنیم در درون اون نرم افزاری که داریم دستورات رو مینویسیم اره اینتر میخوره و میره سطر بعد ولی آیا در خروجی هم همینطوره؟ جواب خیر است.

یا شاید بخواهید یک تکه شعر و یا مثلا یه تکه متن به دلخواه خودتون با قالب بندی سفارشی رو در یک صفحه ی وب HTML قرار دهید؟ خب اینبار باید چکار کرد بنظره شما؟ آیا بنظره شما خیلی راحت میتونیم متن یا شعر با قالب بندی سفارشی مون رو وارد نماییم و در خروجی هم نمایش داده شود! جواب بازم خیر است.

خب دیگه اینجاست که ما باید از یکسری تگ که مخصوص قالب بندی متن ها می باشند استفاده نماییم، مثلا برای اینکه بتونیم یک سطر رو بشکینم و به سطر جدید برویم باید از تگ <br> استفاده کرد و دیگر مواردی که در ادامه با آنها آشنا خواهید شد.

در این بخش و در ادامه میخواهیم با موارد زیر آشنا شویم و باهاشون کار کنیم:

  • Breaks Line – برای شکستن سطر و رفتن به سطر جدید
  • Pre – برای ایجاد متن،شعر و.. با قالب بندی دلخواه
  • Bold Text – یک متن بولد یا برجسته
  • Emphasized Text – یک متن بصورت تاکیدی یا تاکید داشتن بروی یک متن
  • Strong OR Important Text – یک متن مهم
  • Italic Text – یک متن شکسته یا ایتالیک
  • Smaller Text – یک متن با اندازه نسبتا کوچک
  • Big Text – یک متن با اندازه نسبتا بزرگ
  • SubScripted Text – یک متن پایین نویس
  • SuperScripted Text – یک متن بالا نویس
  • Inserted Text – یک متن زیر خط دار
  • Deleted Text – یک متن خط خورده
  • Marked Text – یک متن هایلایت شده

Free-Learn

Breaks Line یا شکستن خط در HTML

ما در HTML با استفاده از تگ <br> میتونیم به راحتی یک سطر رو شکسته و به سطر جدید برویم. به همین راحتی !

امتحان کنید

Free-Learn

ایجاد قالب بندی سفارشی با Pre در HTML

در زبان HTML ما با استفاده از تگ <pre> به راحتی میتونیم هرنوع قالب بندی متنی سفارشی و.. داشته باشیم رو در یک صفحه ی وب قرار دهیم.

برای مثال لطفا به دستورات زیر توجه نمایید و همچنین برای مشاهده خروجی دستورات زیر بصورت آنلاین بروی دکمه (امتحان کنید) کلیک نمایید.

امتحان کنید

Free-Learn

Bold Text In HTML

در HTML ما میتوانیم با استفاده از تگ <b> یک متن بولد شده را ایجاد نماییم.

تگ <b> فقط و صرفا یک متن را بصورت بولد یا پررنگ شده بدون هیچگونه اهمیت محتوایی نمایش میدهد.

Salam Khobi? Man Sadegh Hastam.

امتحان کنید

Free-Learn

Emphasized Text In HTML

در HTML ما میتوانیم با استفاده از تگ <em> یک متن شکسته بهمراه ارزش محتوایی بالا را ایجاد نماییم.

Salam Khobi? Man Sadegh Hastam.

تگ <em> در ظاهر همانند تگ <i> می باشد ولی در معنا برای مرورگر کاملا باهمدیگر فرق میکنند.


امتحان کنید

Free-Learn

Important Text In HTML

در HTML ما میتوانیم با استفاده از تگ <strong> یک متن بولد شده بهمراه ارزش محتوایی مهم و زیاد را ایجاد نماییم.

Salam Khobi? Man Sadegh Hastam.

تگ <strong> در ظاهر همانند تگ <b> می باشد ولی در معنا برای مرورگر کاملا باهمدیگر فرق میکنند.


امتحان کنید

Free-Learn

Italic Text In HTML

در HTML ما میتوانیم با استفاده از تگ <i> یک متن شکسته یا ایتالیک شده را ایجاد نماییم.

Salam Khobi? Man Sadegh Hastam.

امتحان کنید

Free-Learn

Smaller And Bigger Text In HTML

در HTML ما میتوانیم با استفاده از تگ <small> و تگ <big> یک متن با اندازه نسبتا کوچک و نسبتا بزرگ را ایجاد نماییم.

Salam Khobi? Man Sadegh Hastam.

امتحان کنید

Free-Learn

Subscripted Text In HTML

در HTML ما میتوانیم با استفاده از تگ <sub> یک متن را بصورت پایین نویس ایجاد نماییم.

Salam Khobi? Man Sadegh Hastam.

امتحان کنید

Free-Learn

Superscripted Text In HTML

در HTML ما میتوانیم با استفاده از تگ <sup> یک متن را بصورت بالا نویس ایجاد نماییم.

Salam Khobi? Man Sadegh Hastam.

امتحان کنید

Free-Learn

Inserted Text In HTML

در HTML ما میتوانیم با استفاده از تگ <ins> یک خط را به زیر یک متن بکشیم یا یک متن زیر خط دار ایجاد نماییم.

Salam Khobi? Man Sadegh Hastam.

امتحان کنید

Free-Learn

Deleted Text In HTML

در HTML ما میتوانیم با استفاده از تگ <del> یک متن را خط بزنیم یا از یک صفحه وب حذف نماییم.

Salam Khobi? Man Sadegh Hastam.

امتحان کنید

Free-Learn

Marked Text In HTML

حتما تا حالا دیده اید که یک متن را بصورت هایلایت یا مارک شده قرار میدهند، در HTML ما میتوانیم با استفاده از تگ <mark> یک متن را بصورت هایلایت نمایش دهیم.

Salam Khobi? Man Sadegh Hastam.

امتحان کنید

Free-Learn

خب دوستان عزیز و محترم به پایان بخش قالب بندی متن ها یا Text Formatting در HTML رسیدیم و امیدوارم که بخوبی این تگ هارو یاد گرفته باشید.

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

Free-Learn

  • خلاصه ی این بخش
  • تگ BR دقیقا کاره دکمه اینتر (Enter) را انجام میدهد، برای شکستن یک سطر و رفتن به سطر جدید باید از این تگ استفاده نماییم.
  • اگر بخواهیم یک متن بصورت سفارشی در یک صفحه ی وب قرار دهیم باید از تگ pre استفاده نماییم. هرچیزی درون این تگ وارد نمایید در خروجی همانطورم به شما نمایش داده میشود.
  • برای برجسته یا بولد کردن یک متن باید از تگ b استفاده کرد.
  • اگر بخواهیم یک متن که دارای ارزش محتوایی می باشد درون یک صفحه ی وب وارد نماییم باید از تگ strong استفاده نماییم.
  • اگر بخواهیم بروی یک متن یا کلمه تاکید داشته باشیم باید آنرا درون تگ em قرار دهیم.
  • اگر بخواهیم یک متن را بصورت کج شده به نمایش دربیاوریم باید آن را درون تگ i قرار دهیم.
  • برای ایجاد یک متن با اندازه نسبتا بزرگ باید از تگ big و برای ایجاد یک متن با اندازه نسبتا کوچک باید از تگ small استفاده کرد.
  • برای ایجاد یک متن بصورت پایین نویس باید از تگ sub و برای ایجاد آن بصورت بالانویس باید از تگ sup استفاده کرد.
  • برای زیر خط دار کردن یک متن باید از تگ ins استفاده نماییم.
  • برای خط زدن یک متن باید از تگ del استفاده نماییم.
  • برای مارک کردن یا هایلایت کردن یک متن باید از تگ mark استفاده کرد.
  • ما با استفاده از سی اس اس به راحتی میتوانیم تمامی تگ های HTML را به دلخواه سفارشی سازی نماییم.
  • دانلود PDF این آموزش
  • برای دانلود فایل PDF این آموزش کلیک نمایید