سایت آموزشی فری لرن
سایت آموزشی فری لرن
خواندن ۳ دقیقه·۶ سال پیش

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

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


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

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

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

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

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

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

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

  • Breaks Line – برای شکستن سطر و رفتن به سطر جدید
  • Pre – برای ایجاد متن،شعر و.. با قالب بندی دلخواه
  • Bold Text – یک متن بولد یا برجسته
  • Inserted Text – یک متن زیر خط دار
  • Deleted Text – یک متن خط خورده
  • Marked Text – یک متن هایلایت شده

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

<body>
<p>
Salam Khobi? Man <br>
Sadegh Hastam. <br>
Modir Website <br>
Free-Learn.Ir
</p>
</body>
امتحان کنید

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

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

<body>
<pre>
سلام خوبی؟ من صادق هستم
------ ++ -------
اینجا هر چی دلم بخواد میتونم وارد کنم
</pre>
</body>
امتحان کنید

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

<body>
Salam Khobi? Man <b>Sadegh</b> Hastam.
</body>
امتحان کنید

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

<body>
Salam Khobi? Man <ins>Sadegh</ins> Hastam.
</body>
امتحان کنید

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

<body>
Salam Khobi? Man <del>Sadegh</del> Hastam.
</body>
امتحان کنید

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

<body>
Salam Khobi? Man <mark>Sadegh</mark> Hastam.
</body>
امتحان کنید

منبع: سایت آموزشی فری لرن
برای مشاهده آموزش های بیشتر و همچنین دانلود فایل PDF این آموزش لطفا به سایت مراجعه نمایید.
زبان html
وبسایت آموزشی فری لرن - https://free-learn.ir
شاید از این پست‌ها خوشتان بیاید