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

انجمن

خانه » آموزش اچ تی ام ال » آموزش HTML فصل دوم– انواع نوشتن متن در HTML

آموزش HTML فصل دوم– انواع نوشتن متن در HTML

سه شنبه ، ۱۳ دی ۱۳۹۰ 0 دیدگاه نوشته:admin
انواع نوشتن متن در HTML

انواع نوشتن متن در HTML

در این آموزش میخواهیم بدانیم که چگونه با استفاده از تگ ها میتوانیم متون نوشته شده را به نحو دلخواه ویرایش کنیم. میدانید که اگر بخواهیم یک متن را بهصورت ساده در صفحه نمایش دهیم متن مورد نظر را درون تگ body مینویسیم .برای نمونه به این مثال توجه کنید.برای اینکار طبق معمول در برنامه Notepad تگ های اصلی را می نویسیم:

view sourceprint?
۱ <html>
۲ <head>
۳ <title>Learning HTML</title>
۴ </head>
۵ <body>
۶ Start HTML
۷ This is a test for learning html
۸ </body>
۹ </html>

سپس با انتخاب گزینه save as فایل مورد نظر را با نام دلخواه و پسوند htmذخیره نمایید. و نتیجه کار را در مرورگر وب مشاهده نمایید.

همانطور که ملاحظه میکنید متن نوشته شده در قسمت bodyدر صفحه نمایش داده شده است.اما نکته قابل توجه اینست که دو خط نوشته شده ما در بدنه این تگ تنها در یک سطر نشان داده شده است.

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

اولین تگ، تگ <b> میباشد.این تگ باعث میشود کلماتی که بین قسمت ابتدایی و انتهاییش قرار دارند به صورت توپر یاBold نمایش داده شوند.

برای مثال در کد های بالا تگ <b> را در سطر اول مینویسیم.

view sourceprint?
۱ <html>
۲ <head>
۳ <title>Learning HTML</title>
۴ </head>
۵ <body>
۶ <b>Start  HTML</b>
۷ This is a test for learning html
۸ </body>
۹ </html>

حال آنرا save میکنیم و بر روی مرورگر رفته و برای اینکه تغییرات را مشاهده کنیم صفحه را refresh کرده یا از کلیدF5 استفاده نمایید.مشاهده میکنید که کلمه Start HTMLبه صورت پر رنگ و توپر درآمده است.

تگ بعدی تگ <u> میباشد.این تگ نیز نیز متن را به صورت زیر خط دار نمایش میدهد.در مثال قبلی کلمه test را در داخل این تگ مینویسیم :

view sourceprint?
۱ <html>
۲ <head>
۳ <title>Learning HTML</title>
۴ </head>
۵ <body>
۶ <b>Start HTML</b>
۷ This is a <u> test</u> for learning html
۸ </body>
۹ </html>

حال آنرا save میکنیم و بر روی مرورگر رفته و برای اینکه تغییرات را مشاهده کنیم صفحه را refresh کرده یا از کلیدF5 استفاده نمایید.مشاهده میکنید که کلمه testبه صورت زیر خط دار درآمده است.

تگ بعدی تگ <i>میباشد.این تگ متن را به صورت کج یا ایتالیک نمایش میدهد.در مثال قبلی عبارت learning html را در این تگ قرار میدهیم:

view sourceprint?
۱ <html>
۲ <head>
۳ <title>Learning HTML</title>
۴ </head>
۵ <body>
۶ <b>Start HTML</b>
۷ This is a <u> test</u> for<i> learning html</i>
۸ </body>
۹ </html>

حال آنرا save میکنیم و بر روی مرورگر رفته و برای اینکه تغییرات را مشاهده کنیم صفحه را refresh کرده یا از کلیدF5 استفاده نمایید.مشاهده میکنید که کلمه learning html به صورت زیر کج یا ایتالیک درآمده است.

تگ بعدی <strike> میباشد.این تگ متن را به صورت خط خورده نمایش میدهد.برای مثال در مثال قبلی ابتدا تگ های نوشته شده را پاک کرده سپس تگ strike را در سطر دوم بنویسید:

view sourceprint?
۱ <html>
۲ <head>
۳ <title>Learning HTML</title>
۴ </head>
۵ <body>
۶ Start HTML
۷ <strike>This is a test for learning html</strike>
۸ </body>
۹ </html>

برای مشاهد نتیجه کار فایل را ذخیره کرده و در مروگر باز کنید.مشاهده مینمایید که عبارت This is a test for learning htmlبه صورت خط خورده نمایش داده میشود.

به جز تگ های معرفی شده تگ های بیشتری برای کار با متون وجود دارد که آنها را در جدول زیر مشاهده می نمایید:

جدول تگ های html

جدول تگ های html

(برای مشاهده تصویر در اندازه حقیقی بر روی آن کلیک نمایید.)

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

ابتدا تگ <br />که تنها دارای یک قسمت است و قسمت پایانی ندارد.این تگ باعث میشود که خط مورد نظر شکسته شده  و از ابتدای خط بعدی نوشته شود.برای نمونه در مثال قبلی تگ<br>را برای شکستن خط بعد از عبارت Start HTML استفاده مینماییم:

view sourceprint?
۱ <html>
۲ <head>
۳ <title>Learning HTML</title>
۴ </head>
۵ <body>
۶ Start HTML<br />
۷ This is a test for learning html
۸ </body>
۹ </html>

به نحوه نوشتن این تگ واثرات آن دقت نمایید.

برای مشاهده تغییرات انجام شده فایل متنی را ذخیره کرده و از طریق مرورگر اجرا نمایید.

همانطور که ملاحظه مینمایید عبارت This is a test for learning html از سطر جدید آغاز شده است.

تگ بعدی تگ <center> میاشد.این تگ متن را به صورت وسط چین نمایش میدهد.برای نمونه تاثیر این تگ را در مثال قبل مشاهده کنید.

view sourceprint?
۱ <center>Start HTML <br />
۲ This is a test for learning html</center>

برای مشاهده تغییرات انجام شده فایل متنی را ذخیره کرده و از طریق مرورگر اجرا نمایید.

میبینید که متن وسط صفحه قرار گرفته است.

0 نظر به ثبت رسیده است

نوشتن دیدگاه

ایمیل شما آشکار نمی شود


پنج + 4 =

مطالب پربازدید
مطالب مرتبط مطالب تصادفی
خرید vpn خرید وی پی ان خرید vpn خرید vpn خرید kerio خرید سی سی کم
تمامی حقوق مادی و معنوی برای این سایت محفوظ است و هر گونه کپی برداری از آن خلاف قوانین می باشد. | PCTech
خرید vpn