در این درس با کدهایی آشنا می شویم که برای متن های وب سایتمان باید از آنها استفاده کنیم. با استفاده از این کدها می توانیم فونت مورد نظر را به متن خود داده و به زیبایی سایت خود کمک کنیم. سایت هایی با فونت زیبا معمولا پرطرفدار از سایت هایی هستند که فونت بسیار بزرگ و یا کوچک دارند.
قلم ها ( HTML Fonts )
در این درس یاد خواهید گرفت که چگونه نوع قلم، اندازه و رنگ نوشته ها در صفحات HTML تعیین میشوند.
با وجودی که هنوز بعضی از کسانی که از HTML استفاده می کنند از تگ <font> برای تعیین نام و نوع قلم، رنگ و اندازه متون استفاده میکنند ولی در استاندارد 4 HTML و همچنین XHTML از تگ <font> پشتیبانی نمی شود و استفاده از Style Sheet ها به عنوان جایگزین معرفی شده است.
تگ <font>
در نسخه های 3.2 و قبلی تر زبان HTML از تگ <font> برای تعیین نام قلم، رنگ و اندازه متون استفاده میشود. در این تگ شناسه face نام قلم ، شناسه size انداره قلم و شناسه color معرف رنگ متن خواهد بود. مثالهای زیر کاربرد تگ <font> قدیمی را نشان میدهند.
کد HTML
نمايش کد روبرو توسط مرورگر
{rsmembership category="1"}
<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
کاربرد
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> از رده خارج محسوب میشود و کنسرسیوم جهانی تعیین استانداردهای وب (World Wide Web Consortium, W3C) این تگ را از مجموعه تگهای استاندارد HTML کنار گذاشته است و اکیدا توصیه میشود که از Style Sheet ها برای تعریف هر گونه خواص نمایشی و آرایشی (layout & Presentation) المانها در HTML استفاده شود.
روش صحیح تعیین نام قلم، اندازه و رنگ متون با کمک Style Sheet ها:
هر چند که سالها است که مبحث و کلاسهای درس Style Sheet ها در "مدرسه وب" در دست تهیه بوده و امیدواریم که بزودی ارائه شوند! ولی تا قبل از آن استفاده از شناسه ای به نام style در بسیاری از المانها کار گشا خواهد بود. مثالهای ساده زیر نحوه تعیین نام قلم، اندازه و رنگ متون را با کمک شناسه 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 ...
شناسه های استاندارد المان span
id, class, title, style, dir, lang
مثالهائی از نحوه استفاده از المان 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...
id, class, title, style, dir, lang = شناسه های استاندارد المان div
<div> Defines a division/section in a document تعریف بخش و ناحیه ای از صفحه HTML
<span> Defines a section in a document تعریف بخش و ناحیه ای از صفحه HTML
{else}
برای دسترسی به ادامه مطلب می بایستی در وب سایت اشتراک داشته باشید
{/rsmembership}