این آموزش در تاریخ ۱۴۰۲/۰۶/۱۸ آپدیت شده است.
قالب بندی متن ها یا Text Formatting در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش قالب بندی متن ها یا Text Formatting در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 قالب بندی متن ها یا Text Formatting در HTML
- 2 Breaks Line یا شکستن خط در HTML
- 3 ایجاد قالب بندی سفارشی با Pre در HTML
- 4 Bold Text In HTML
- 5 Emphasized Text In HTML
- 6 Important Text In HTML
- 7 Italic Text In HTML
- 8 Smaller And Bigger Text In HTML
- 9 Subscripted Text In HTML
- 10 Superscripted Text In HTML
- 11 Inserted Text In HTML
- 12 Deleted Text In HTML
- 13 Marked Text In HTML
قالب بندی متن ها یا Text Formatting در HTML
خب یعنی چه قالب بندی متن!؟ ببینید دوستان در جلسات قبلی هم اشاره کردم که زبان HTML هر تگی رو برای کاری و هدفی ایجاد کرده ، پس ماهم اگه میخوایم یک صفحه استاندارد و معتبر از نظر کدنویسی داشته باشیم طبیعتا باید از هرتگی در مکان مناسب خودش استفاده کنیم.
بفرض مثال من اگه بخوام لینک بزارم باید از تگ a استفاده کنم بخوام عکس بزارم از تگ img و… حال ما یسری تگ هارو در زبان HTML داریم به اسم تگ های قالب بندی متن یا Text Formatting که این تگ ها مخصوص کار با متن هاست.
بفرض مثال ما نمیتونیم هر کجا که دلمون خواست یه اینتر ( Enter ) بزنیم و متن رو در سطر بعدی بنویسیم، چون در حالت عادی همچین امکانی وجود نداره و باید حتما از تگ مخصوصش استفاده کرد.
بفرض مثال ممکن است بخواهید در متن تان یک کلمه را بولد یا برجسته یا bold کنید و یا مثلا بخواهید یک کلمه را شکسته یا ایتالیک یا italic کنید، یا بخواهید یک کلمه را خط بزنید و دیگر مواردی که در ادامه ی این بخش میخواهیم با آنها آشنا شویم.
یا شاید بخواهید در یک پاراگراف یک سطر را شکسته و به سطر جدید بروید ؟ خب بنظره شما باید چکار کرد؟ وقتی ما اینتر (Enter) بزنیم در درون اون نرم افزاری که داریم دستورات رو مینویسیم خب اره اینتر میخوره و میره سطر بعد ولی در خروجی و در مرورگرها خیر اینجوری نمیشه.
خب دیگه اینجاست که ما باید از یکسری تگ که مخصوص قالب بندی متن ها می باشند استفاده نماییم تا در خروجی و مرورگرها هم دقیقا همون چیزی که میخوایم اتفاق بیوفته.
در این بخش و در ادامه میخواهیم با موارد زیر آشنا شویم و باهاشون کار کنیم:
- Br – برای شکستن سطر و رفتن به سطر جدید
- Pre – برای ایجاد متن ،شعر و.. با قالب بندی دلخواه
- Bold Text – یک متن بولد یا برجسته
- Emphasized Text – یک متن بصورت تاکیدی یا تاکید داشتن بروی یک متن
- Strong Text – یک متن مهم
- Italic Text – یک متن شکسته یا ایتالیک
- Smaller Text – یک متن با اندازه نسبتا کوچک
- Big Text – یک متن با اندازه نسبتا بزرگ
- SubScripted Text – یک متن پایین نویس
- SuperScripted Text – یک متن بالا نویس
- Inserted Text – یک متن زیر خط دار
- Deleted Text – یک متن خط خورده
- Marked Text – یک متن هایلایت شده
Free-Learn
Breaks Line یا شکستن خط در HTML
ما در HTML با استفاده از تگ <br> میتونیم به راحتی یک سطر رو شکسته و به سطر جدید برویم، یعنی باید از این تگ در کدهامون استفاده کنیم تا در خروجی و مرورگر به سطر جدید بریم.
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <p> Salam <br> Khobi? <br> Man <br> Sadegh <br> Hastam </p> </body> |
Free-Learn
ایجاد قالب بندی سفارشی با Pre در HTML
در ادامه آموزش قالب بندی متن ها یا Text Formatting در HTML میخوایم با تگ Pre آشنا بشیم.
در زبان HTML ما با استفاده از تگ <pre> به راحتی میتونیم هرچی دوس داشتیم تو خروجی نشون بدیم ، مثلا اگه اینتر بزنیم خب تو خروجی هم میره سطر بعد ، یا مثلا اگه خط فاصله بزاریم تو خروجی هم به همون اندازه خط فاصله میده ( کلا هرچی داخلش بنویسید در خروجی هم دقیقا همونجوری نشونش میده )
برای مثال لطفا به دستورات زیر توجه نمایید و همچنین برای مشاهده خروجی دستورات زیر بصورت آنلاین بروی دکمه (امتحان کنید) کلیک نمایید.
|
1 2 3 4 5 6 7 8 |
<body> <pre> سایت آموزشی فری لرن سلام خوبی؟ ----- کلا هرچی دلم بخواد اینجا تایپ میکم </pre> </body> |
Free-Learn
Bold Text In HTML
در HTML ما میتوانیم با استفاده از تگ <b> یک متن بولد شده را ایجاد نماییم.
تگ <b> فقط و صرفا یک متن را بصورت بولد یا پُررنگ شده بدون هیچگونه اهمیت محتوایی نمایش میدهد.
Salam Khobi? Man Sadegh Hastam.
|
1 2 3 4 5 |
<body> Salam Khobi? Man <b>Sadegh</b> Hastam. </body> |
Free-Learn
Emphasized Text In HTML
در HTML ما میتوانیم با استفاده از تگ <em> بروی یک متن تاکید کنیم، مثلا بگیم این متن برای ما ارزشمنده یا ارزش محتوایی داره، پس موتورهای جستجوگر به متن داخل این تگ توجه میکنن چون دارای ارزش محتوایی می باشد.
Salam Khobi? Man Sadegh Hastam.
|
1 2 3 4 5 |
<body> Salam Khobi? Man <em>Sadegh</em> Hastam. </body> |
Free-Learn
Important Text In HTML
در HTML ما میتوانیم با استفاده از تگ <strong> یک متن بولد شده بهمراه ارزش محتوایی مهم و زیاد را ایجاد نماییم، یعنی اینم یجورایی مثه اینه که داریم روش تاکید میکنیم که ارزش محتوایی داره.
تگ <strong> هم در ظاهر همانند تگ <b> می باشد ولی خب بازم اینا برای موتورهای جستجوگر باهمدیگر فرق میکنند.
Salam Khobi? Man Sadegh Hastam.
|
1 2 3 4 5 |
<body> Salam Khobi? Man <strong>Sadegh</strong> Hastam. </body> |
Free-Learn
Italic Text In HTML
در HTML ما میتوانیم با استفاده از تگ <i> یک متن شکسته یا ایتالیک شده را ایجاد نماییم، صرفا یه متن کج رو ایجاد میکنه بدون هیچگونه تاکید یا ارزش محتوایی.
Salam Khobi? Man Sadegh Hastam.
|
1 2 3 4 5 |
<body> Salam Khobi? Man <i>Sadegh</i> Hastam. </body> |
Free-Learn
Smaller And Bigger Text In HTML
در HTML ما میتوانیم با استفاده از تگ <small> و تگ <big> یک متن با اندازه نسبتا کوچک و نسبتا بزرگ را ایجاد نماییم.
Salam Khobi? Man Sadegh Hastam.
|
1 2 3 4 5 |
<body> Salam Khobi? <small>Man</small> <big>Sadegh</big> <small>Hastam.</small> </body> |
Free-Learn
Subscripted Text In HTML
در HTML ما میتوانیم با استفاده از تگ <sub> یک متن را بصورت پایین نویس ایجاد نماییم.
Salam Khobi? Man Sadegh Hastam.
|
1 2 3 4 5 |
<body> Salam Khobi? Man <sub>Sadegh</sub> Hastam. </body> |
Free-Learn
Superscripted Text In HTML
در HTML ما میتوانیم با استفاده از تگ <sup> یک متن را بصورت بالا نویس ایجاد نماییم.
Salam Khobi? Man Sadegh Hastam.
|
1 2 3 4 5 |
<body> Salam Khobi? Man <sup>Sadegh</sup> Hastam. </body> |
Free-Learn
Inserted Text In HTML
در HTML ما میتوانیم با استفاده از تگ <ins> یک خط را به زیر یک متن بکشیم یا یک متن زیر خط دار ایجاد نماییم.
Salam Khobi? Man Sadegh Hastam.
|
1 2 3 4 5 |
<body> Salam Khobi? Man <ins>Sadegh</ins> Hastam. </body> |
Free-Learn
Deleted Text In HTML
در HTML ما میتوانیم با استفاده از تگ <del> یک متن را خط بزنیم یا از یک صفحه وب حذف نماییم، وقتی موتورهای جستجو این تگ رو ببینن دیگه میگن این متن داخلش یه متن حذف شدس یا یه متنی هست که تاریخ اعتبارش تموم شده.
Salam Khobi? Man Reza Hastam.
|
1 2 3 4 5 |
<body> Salam Khobi? Man <del>Reza</del> Hastam. </body> |
Free-Learn
Marked Text In HTML
حتما تا حالا دیده اید که یک متن را بصورت هایلایت یا هم همون ماژیک فسفری خودمون قرار میدهند، در HTML ما میتوانیم با استفاده از تگ <mark> یک متن را بصورت هایلایت شده نمایش دهیم.
Salam Khobi? Man Sadegh Hastam.
|
1 2 3 4 5 |
<body> Salam Khobi? Man <mark>Sadegh</mark> Hastam. </body> |
خب دوستان عزیز و محترم به پایان بخش قالب بندی متن ها یا Text Formatting در HTML رسیدیم و امیدوارم که بخوبی این تگ هارو یاد گرفته باشید.
لطفا توجه داشته باشید : همه ی این تگ هایی که دیدید رو میشه با زبان CSS به راحتی تغییر داد، یعنی میخوام بگم اینجوری نیست فکر کنید مثلا تگ mark رنگ زمینش فقط میتونه زرد باشه، نه اتفاقا خیلی راحت با CSS میشه هر استایلی دوس داشتیم رو تگ ها انجام بدیم. ( مثال )
