با وجودیکه هنوز بعضی از اچتمل کاران از تگ <font> برای تعیین نام و نوع قلم، رنگ و اندازه متون استفاده میکنند ولی در استاندارد جدید اچتمل (نسخه ۴) و همچنین XHTML از تگ <font> پشتیبانی نمیشود و استفاده از Style Sheet ها به عنوان جایگزین معرفی شده است.
تگ <font>
در نسخه های ۳٫۲ و قبلی تر زبان اچتمل از تگ <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 و اندازه ۱ و رنگ FF9900 </font> </p> |
متنی با قلم Times و اندازه ۱ و رنگ FF9900 |
|
|
<p dir="rtl"> <font size="2" face="Tahoma" color="red"> این متنی با قلم Tahoma و اندازه ۲ و رنگ قرمز </font> </p> |
متنی با قلم Tahoma و اندازه ۲ و رنگ قرمز |
|
|
شناسه های تگ <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 Sheet ها در “مدرسه وب” در دست تهیه بوده و امیدواریم که بزودی ارائه شوند ولی تا قبل از آن استفاده از شناسه ای به نام style در بسیاری از المانها کار گشا خواهد بود.
تگ <span>
تگ <span> سبب تعریف محدوده و گستره ای مشخص میشود. تمامی المان هائی که درون تگهای <span> و <span/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصی از قبیل استیل (Style) و یا سمت و جهت نمایش متون(dir).
بر خلاف تگ های <p> و <div> مرورگرها هیچ سطر جدیدی به اول یا آخر المان <span> اضافه نمی کنند.
مثال:
| کد اچتمل | نمایش کد روبرو توسط مرورگر |
| <p>Some text <span style=”color:#0000AF;”>another text</span> again text…</p> | Some text another text again text… |
|
|
|
|
| id, class, title, style, dir, lang | شناسه های استاندارد المان span |
|
|
| مثالهائی از نحوه استفاده از المان span و Style sheet ها: | ||
| روش قدیمی | روش صحیح | |
| <font color=”#FF00FF”>Hello!</font> | <span style=”color:#FF00FF”>Hello!</span> | |
|
||
| <font color=”rgb(255,0,255)”>Hello!</font> | <span style=”color:rgb(255,0,255)”>Hello!</span> | |
|
||
| <font style=”color:Fuchsia”>Hello!</font> | <span style=”color:Fuchsia”>Hello!</span> | |
|
||
| <font color=”#FF00FF” size=”3″>Hello!</font> | <span style=”color:#FF00FF;font-size:100%”>Hello!</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 |
|
|
| Start Tag | Purpose | کاربرد |
|---|---|---|
| <div> | Defines a division/section in a document | تعریف بخش و ناحیه ای از صفحه اچتمل |
|
||
| <span> | Defines a section in a document | تعریف بخش و ناحیه ای از صفحه اچتمل |
|
||
دیدگاه خود را بیان کنید.
باید وارد سایت شده باشید برای دیدگاه دادن