|
با وجودیکه هنوز بعضی از اچتمل
کاران از تگ <font> برای تعیین نام و نوع قلم، رنگ و
اندازه متون استفاده میکنند ولی در استاندارد جدید اچتمل
(نسخه 4) و همچنین XHTML از تگ <font> پشتیبانی
نمیشود و استفاده از Style Sheet ها به عنوان جایگزین
معرفی شده است.
درس قبلی،
استایل شیتها
تگ <font>
در نسخه های 3.2 و قبلی تر زبان اچتمل از تگ
<font> برای تعیین نام قلم، رنگ و اندازه متون
استفاده میشود. در این تگ شناسه face نام قلم ، شناسه size
انداره قلم و شناسه color معرف رنگ متن خواهد بود. مثالهای
زیر کاربرد تگ <font> خدابیامرز را نشان میدهند:
| کد اچتمل |
نمايش کد روبرو توسط
مرورگر |
<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p> |
This is a paragraph.
|
![]() |
<p dir="rtl">
<font size="1" face="Times" color="#FF9900">
متنی با قلم Times و اندازه 1 و رنگ FF9900
</font>
</p> |
متنی با قلم Times و اندازه 1 و رنگ FF9900
|
![]() |
<p dir="rtl">
<font size="2" face="Tahoma" color="red">
این متنی با قلم Tahoma و اندازه 2 و رنگ قرمز
</font>
</p> |
متنی
با قلم Tahoma و اندازه 2 و رنگ قرمز
|
![]() |
شناسه های تگ <font>
| Attribute |
Example |
کاربرد |
| size="number" |
size="2" |
تعیین اندازه قلم |
![]() |
| size="+number" |
size="+1" |
افزایش اندازه قلم |
![]() |
| size="-number" |
size="-1" |
کاهش اندازه قلم |
![]() |
| face="face-name" |
face="Times" |
تعیین نام قلم |
![]() |
| color="color-value" |
color="#eeff00" |
تعیین رنگ قلم |
![]() |
| color="color-name" |
color="red" |
تعیین رنگ قلم |
![]() |
*** بیان مختصر عملکرد تگ <font> در این
دروس فقط جهت اطلاع بوده و استفاده از آنها در طراحی صفحات
اچتمل توصیه نمیشود.
دیگر از تگ <font> استفاده نکنید!
تگ <font> از رده خارج محسوب میشود و
کنسرسیوم جهانی تعیین استانداردهای وب (World Wide Web
Consortium, W3C) این تگ را از مجموعه تگهای استاندارد
اچتمل کنار گذاشته است و اکیدا توصیه میشود که از Style
Sheet ها برای تعریف هر گونه خواص نمایشی و آرایشی (layout
& Presentation) المانها در اچتمل استفاده شود.
روش صحیح تعیین نام قلم، اندازه و رنگ متون با
کمک Style Sheet ها:
استفاده از شناسه ای به نام
style در بسیاری از المانها کار گشا خواهد بود. مثالهای
ساده زیر نحوه تعیین نام قلم، اندازه و رنگ متون را با کمک
شناسه style به نمایش خواهند گذاشت:
تعیین نام قلم
مثالی در مورد تعیین نام
قلم در یک استیل درجا (inline)
تعیین اندازه قلم
مثالی در مورد تعیین
اندازه قلم در یک استیل درجا (inline)
تعیین رنگ قلم
مثالی در مورد تعیین رنگ
قلم در یک استیل درجا (inline)
تعیین نام، اندازه و رنگ قلم
مثالی در
مورد تعیین نام، اندازه و رنگ قلم در یک استیل درجا
(inline)
مثال کاربردی در مورد Style Sheet
ها
مثالی در مورد نحوه تعریف استیلهای مختلف نمایش
متون در جداول
تگ <span>
تگ <span> سبب تعریف
محدوده و گستره ای مشخص میشود. تمامی المان هائی که درون
تگهای <span> و <span/> قرار خواهند گرفت خواص
آنرا به ارث خواهند برد، خواصی از قبیل استیل (Style) و یا
سمت و جهت نمایش متون(dir).
بر خلاف تگ های <p>
و <div> مرورگرها هیچ سطر جدیدی به اول یا آخر المان
<span> اضافه نمی کنند. مثال:
تگ <div>
تگ <div> سبب تعریف
محدوده و گستره ای مشخص میشود. تمامی المان هائی که درون
تگهای <div> و <div/> قرار خواهند گرفت خواص
آنرا به ارث خواهند برد، خواصی از قبیل استیل (Style) و یا
سمت و جهت نمایش متون(dir).
بر خلاف تگ <span>
مرورگرها یک سطر جدید به اول و آخر المان <div>
اضافه می کنند. مثال:
| کد اچتمل |
نمايش کد روبرو توسط
مرورگر |
| <p>Some text <div
style="color:#0000AF;">another text</div>
again text...</p> |
Some text
another
text again text...
|
![]() |
![]() |
| id, class, title, style, dir, lang |
شناسه های استاندارد المان div |
![]() |
تعیین جهت نمایش متون
مثالی در مورد
استفاده از تگ div و اعمال "جهت نمایش متون" به بخشی از
صفحه اچتمل
| Start Tag |
Purpose |
کاربرد |
| <div> |
Defines a division/section in a document |
تعریف بخش و ناحیه ای از
صفحه اچتمل |
![]() |
| <span> |
Defines a section in a document |
تعریف بخش و ناحیه ای از
صفحه اچتمل |
![]() |
|