آموزش HTML بخش پانزدهم :: تعیین نام،نوع قلم،رنگ و...

با وجوديکه هنوز بعضي از HTML کاران از تگ <font> براي تعيين نام و نوع قلم، رنگ و اندازه متون استفاده ميکنند ولي در استاندارد جديد HTML (نسخه 4) و همچنين XHTML از تگ <font> پشتيباني نميشود و استفاده از Style Sheet ها به عنوان جايگزين معرفي شده است.

تگ <font>

در نسخه هاي 3.2 و قبلي تر زبان HTML از تگ <font> براي تعيين نام قلم، رنگ و اندازه متون استفاده ميشود. در اين تگ شناسه face نام قلم ، شناسه size انداره قلم و شناسه color معرف رنگ متن خواهد بود. مثالهاي زير کاربرد تگ <font> خدابيامرز را نشان ميدهند:
کد HTML نمايش کد روبرو توسط مرورگر

<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> در اين دروس فقط جهت اطلاع بوده و استفاده از آنها در طراحي صفحات HTML توصيه نميشود.
ديگر از تگ <font> استفاده نکنيد!

تگ <font> از رده خارج محسوب ميشود و کنسرسيوم جهاني تعيين استانداردهاي وب (World Wide Web Consortium, W3C) اين تگ را از مجموعه تگهاي استاندارد HTML کنار گذاشته است و اکيدا توصيه ميشود که از Style Sheet ها براي تعريف هر گونه خواص نمايشي و آرايشي (layout & Presentation) المانها در HTML استفاده شود.

روش صحيح تعيين نام قلم، اندازه و رنگ متون با کمک Style Sheet ها:

هر چند که مبحث و کلاسهاي درس Style Sheet ها در "مدرسه وب" در دست تهيه بوده و اميدواريم که بزودي ارائه شوند ولي تا قبل از آن استفاده از شناسه اي به نام style در بسياري از المانها کار گشا خواهد بود.

تگ <span>

تگ <span> سبب تعريف محدوده و گستره اي مشخص ميشود. تمامي المان هائي که درون تگهاي <span> و <span/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصي از قبيل استيل (Style) و يا سمت و جهت نمايش متون(dir).
بر خلاف تگ هاي <p> و <div> مرورگرها هيچ سطر جديدي به اول يا آخر المان <span> اضافه نمي کنند.
مثال:

کد HTML نمايش کد روبرو توسط مرورگر

<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> اضافه مي کنند.
مثال:

کد HTML نمايش کد روبرو توسط مرورگر

<p>Some text <div style="color:#0000AF;">another text</div> again text...</p>

Some text
another text
again text...

Start Tag Purpose کاربرد

<div> Defines a division/section in a document تعريف بخش و ناحيه اي از صفحه HTML

<span> Defines a section in a document تعريف بخش و ناحيه اي از صفحه HTML