در این آموزش میخواهیم بدانیم که چگونه با استفاده از تگ ها میتوانیم متون نوشته شده را به نحو دلخواه ویرایش کنیم. میدانید که اگر بخواهیم یک متن را بهصورت ساده در صفحه نمایش دهیم متن مورد نظر را درون تگ body مینویسیم .برای نمونه به این مثال توجه کنید.برای اینکار طبق معمول در برنامه Notepad تگ های اصلی را می نویسیم:
۳ |
<title>Learning HTML</title> |
۷ |
This is a test for learning html |
سپس با انتخاب گزینه save as فایل مورد نظر را با نام دلخواه و پسوند htmذخیره نمایید. و نتیجه کار را در مرورگر وب مشاهده نمایید.
همانطور که ملاحظه میکنید متن نوشته شده در قسمت bodyدر صفحه نمایش داده شده است.اما نکته قابل توجه اینست که دو خط نوشته شده ما در بدنه این تگ تنها در یک سطر نشان داده شده است.
برای ویرایش کردن متن ها ابتدا به معرفی چندین تگ میپردازیم.
اولین تگ، تگ <b> میباشد.این تگ باعث میشود کلماتی که بین قسمت ابتدایی و انتهاییش قرار دارند به صورت توپر یاBold نمایش داده شوند.
برای مثال در کد های بالا تگ <b> را در سطر اول مینویسیم.
۳ |
<title>Learning HTML</title> |
۷ |
This is a test for learning html |
حال آنرا save میکنیم و بر روی مرورگر رفته و برای اینکه تغییرات را مشاهده کنیم صفحه را refresh کرده یا از کلیدF5 استفاده نمایید.مشاهده میکنید که کلمه Start HTMLبه صورت پر رنگ و توپر درآمده است.
تگ بعدی تگ <u> میباشد.این تگ نیز نیز متن را به صورت زیر خط دار نمایش میدهد.در مثال قبلی کلمه test را در داخل این تگ مینویسیم :
۳ |
<title>Learning HTML</title> |
۷ |
This is a <u> test</u> for learning html |
حال آنرا save میکنیم و بر روی مرورگر رفته و برای اینکه تغییرات را مشاهده کنیم صفحه را refresh کرده یا از کلیدF5 استفاده نمایید.مشاهده میکنید که کلمه testبه صورت زیر خط دار درآمده است.
تگ بعدی تگ <i>میباشد.این تگ متن را به صورت کج یا ایتالیک نمایش میدهد.در مثال قبلی عبارت learning html را در این تگ قرار میدهیم:
۳ |
<title>Learning HTML</title> |
۷ |
This is a <u> test</u> for<i> learning html</i> |
حال آنرا save میکنیم و بر روی مرورگر رفته و برای اینکه تغییرات را مشاهده کنیم صفحه را refresh کرده یا از کلیدF5 استفاده نمایید.مشاهده میکنید که کلمه learning html به صورت زیر کج یا ایتالیک درآمده است.
تگ بعدی <strike> میباشد.این تگ متن را به صورت خط خورده نمایش میدهد.برای مثال در مثال قبلی ابتدا تگ های نوشته شده را پاک کرده سپس تگ strike را در سطر دوم بنویسید:
۳ |
<title>Learning HTML</title> |
۷ |
<strike>This is a test for learning html</strike> |
برای مشاهد نتیجه کار فایل را ذخیره کرده و در مروگر باز کنید.مشاهده مینمایید که عبارت This is a test for learning htmlبه صورت خط خورده نمایش داده میشود.
به جز تگ های معرفی شده تگ های بیشتری برای کار با متون وجود دارد که آنها را در جدول زیر مشاهده می نمایید:
جدول تگ های html
(برای مشاهده تصویر در اندازه حقیقی بر روی آن کلیک نمایید.)
در انتهای این قسمت میخواهیم دو تگ پرکاربرد دیگر را نیز به شما معرفی کنیم.
ابتدا تگ <br />که تنها دارای یک قسمت است و قسمت پایانی ندارد.این تگ باعث میشود که خط مورد نظر شکسته شده و از ابتدای خط بعدی نوشته شود.برای نمونه در مثال قبلی تگ<br>را برای شکستن خط بعد از عبارت Start HTML استفاده مینماییم:
۳ |
<title>Learning HTML</title> |
۷ |
This is a test for learning html |
به نحوه نوشتن این تگ واثرات آن دقت نمایید.
برای مشاهده تغییرات انجام شده فایل متنی را ذخیره کرده و از طریق مرورگر اجرا نمایید.
همانطور که ملاحظه مینمایید عبارت This is a test for learning html از سطر جدید آغاز شده است.
تگ بعدی تگ <center> میاشد.این تگ متن را به صورت وسط چین نمایش میدهد.برای نمونه تاثیر این تگ را در مثال قبل مشاهده کنید.
۱ |
<center>Start HTML <br /> |
۲ |
This is a test for learning html</center> |
برای مشاهده تغییرات انجام شده فایل متنی را ذخیره کرده و از طریق مرورگر اجرا نمایید.
میبینید که متن وسط صفحه قرار گرفته است.
