تعیین ویژگی های متن
در این درس میخواهیم با خصوصیات متن در یک صفحه وب آشنا شویم.
خصوصیات مورد نظر ما در این قسمت عبارتند از:نوع فونت ،اندازه فونت و رنگ آن .
برای ایجاد تنظیمات مورد نظر از تگ فونت استفاده میکنیم.برای نمونه به این مثال توجه نمایید.
طبق معمول یک سند HTML ایجاد کرده و کد های زیر را در آن مینویسیم.
۳ |
<title>Learning html</title> |
۹ |
<font size=”۲۰”> This is a test for learning html</font> |
همانطور که ملاحظه مینمایید برای تغییر فونت از تگ font و ویژگی size استفاده مینماییم.
حال برای مشاهده تغییرات انجام شده سند خود را با پسوندhtm ذخیره نموده و در مرورگر فراخوانی نمایید.
میبینید که سایز متن تغییر کرده است.
شناسه دیگر این تگ face میباشد.از این شناسه برای تعیین فونت متن استفاده می کنیم.به عنوان نمونه در مثال قبل با استفاده از شناسه ی فونت برای سطرهای مختلف ، فونت های مختلفی در نظر گرفته و سایز همه آنها را ۶ در نظر میگیریم:
۳ |
<title>Learning html</title> |
۹ |
<font face=”arial” size=”۶”> This is a test for learning html</font></br> |
۱۱ |
<font face=”calibri” size=”۶”> This is a test for learning html</font></br> |
۱۳ |
<font face=”Tahoma” size=”۶”> This is a test for learning html</font></br> |
حال برای مشاهده تغییرات انجام شده سند خود را با پسوندhtm ذخیره نموده و در مرورگر فراخوانی نمایید.
می بینید که هر سطر با فونت متفاوتی نمایش داده شده است . همچینین سایز هر سطر باتوجه به فونت آن متفاوت هست.
ویژگی دیگر متن ها که میتوانیم از طریق تگ فونت تعیین کنیم رنگ آنها میباشد.برای تغییر رنگ یک متن از ویژگی color استفاده مینماییم.برای اینکه رنگ یک آیتم را در HTMLتعییین کنیم دو روش وجود دارد.
اولین روش استفاده از نام رنگ میباشد.به این صورت که نام رنگ مورد نظر را میدهیم.استفاده از این روش ، روش ساده و کارایی می باشد.اما یک ایراد دارد و آن هم اینکه با استفاده از این روش نمی توانیم همه رنگ رنگ ها را تعیین نماییم.
برای رفع این مشکل از اعداد هگزا دسیمال برای مقدار دهی استفاده میکنیم.برای اینکه با نام این رنگ ها آشنا شوید ابتدا به این آدرس مراجعه کنید. در این صفحه مشاهدا میکنید که در کنار نام هر رنگ کد هکس آن نوشته شده است.
حال میخواهیم نحوه استفاده از این دو روش را با یکدیگر مقایسه نماییم.
ابتدا روش اول را انتخاب می نماییم و کدهای زیر را در یک سند جدید HTML مینویسیم:
۳ |
<title>Learning html</title> |
۹ |
<font color=”red”> This is a test </font> |
در انتها فایل مورد نظر را ذخیره میکنیم و نتیجه را مشاهده میکنیم.همانطور که ملاحظه میکنید رنگ متن قرمز شده است.
اکنون دوباره فابل را باز کرده و به جای نام رنگ از کد معادل آن در هگزا دسیمال استفاده میکنیم..یعنی کد ff0000 را به رنگ نسبت میدهیم:
۳ |
<title>Learning html</title> |
۹ |
<font color=”ff0000”> This is a test </font> |
سپس برای مشاهده تغییرات انجام شده فایل را ذخیره کرده و در مرورگر باز میکنیم.می بینید که حاصل فرق نکرده و همان رنگ قرمز میباشد.
