آموزش HTMLفصل دوم – ایجاد خط
پنجشنبه ، 12 ژانویه 2012
0 دیدگاه
نوشته:admin
ایجاد خط
در این قسمت میخواهیم برای جدا کردن قسمت های مختلف یک صفحه ، خط های افقی با پهناهای متفاوت ایجاد کنیم.
برای اینکار از تگ hr که یک تگ منفرد میباشد استفاده میکنیم.برای نمونه یک سند html ایجاد کرده و در قسمت body آن چند سطر متن مینویسیم وسپس برای جدا کردن متن ها از یکدیگر تگ hr را بین آنها مینویسیم.:
۳ |
<title>Learning html</title> |
۹ |
<h3>This is a test for learning html<h3></br> |
۱۱ |
<h3>This is a test for learning html<h3></br> |
۱۵ |
<h3>This is a test for learning html<h3></br> |
۱۷ |
<h3>This is a test for learning html<h3></br> |
حال سند html را ذخیره کرده و نتیجه را مشاهده نمایید.همانطور که ملاحظه میکنید تگ hrباعث ایجاد یک خط افقی بین دو سطر میشود.این تگ دارای شناسه های مختلفی برای تعیین مشخصات آن میباشد.اولین شناسه ای که با آن آشنا میشویم size است.این شناسه اندازه خط را تعیین میکند.به عبارت دیگر تعیین میکند که این خط چند پیکسل ضخامت داشته باشد.
برای نمونه در تمرین قبل شناسه size را برای تگ hrبرابر ۱۰ قرار میدهیم و تاثیر آنرا مشاهده میکنیم.
۳ |
<title>Learning html</title> |
۹ |
<h3>This is a test for learning html<h3></br> |
۱۱ |
<h3>This is a test for learning html<h3></br> |
۱۵ |
<h3>This is a test for learning html<h3></br> |
۱۷ |
<h3>This is a test for learning html<h3></br> |
دوباره سند را ذخیره کرده و تغییرات را مشاهده میکنیم.
شناسه بعدی width میباشد.این شناسه نیز مانند size یک مقدار را به پیکسل دریاقت کرده و طول خط را برابر آن تعیین میکند.
برای مثال تمرین زیر را انجام داده و تغییرات ایجاد شده را مشاهده نمایید.
۳ |
<title>Learning html</title> |
۹ |
<h3>This is a test for learning html<h3></br> |
۱۱ |
<h3>This is a test for learning html<h3></br> |
۱۳ |
<hr size=”۱۰” width=”۱۰۰” /> |
۱۵ |
<h3>This is a test for learning html<h3></br> |
۱۷ |
<h3>This is a test for learning html<h3></br> |
میبینید که خط در وسط صفحه و با طول ۱۰۰ پیکسل نمایش داده میشود.
شناسه بعدی noshade میباشد.این شناسه عبارت noshed را به عنوان ورودی دریافت کرده و باعث میشود که خط کشیده شده بدون سایه باشد و به صورت توپر نمایش داده شود.برای مثال در تمرین قبل شناسه noshade را وارد کرده و تغییرات را مشاهده میکنیم.
۳ |
<title>Learning html</title> |
۹ |
<h3>This is a test for learning html<h3></br> |
۱۱ |
<h3>This is a test for learning html<h3></br> |
۱۳ |
<hr size=”۱۰” width=”۱۰۰” noshade=”noshade” /> |
۱۵ |
<h3>This is a test for learning html<h3></br> |
۱۷ |
<h3>This is a test for learning html<h3></br> |
