ویژگی ها در html
در این جلسه به آموزش ویژگی ها در html خواهیم پرداخت, لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.
درونی کردن ویژگی ها
سه ویژگی درونی وجود دارند که برای اکثر عناصر HTML استفاده می شوند
dir
lang
xmllang
ویژگی dir
این ویژگی به شما اجازه می دهد تا مسیری را به مرورگر نشان دهید که متن در آن باید جریان داشته باشد. ویژگی dir می تواند یکی از دو مقدار باشد، همانطور که در جدول زیر نشان داده شده است
۱. ltr
از چپ به راست مقدار پیش فرض
۲. rtl
راست به چپ برای زبان هایی مانند فارسی یا عربی که از راست به چپ خوانده می شوند.
مثال
<!DOCTYPE html> <html dir="rtl"> <head> <title>Display Directions</title> </head> <body> This is how IE 5 renders right-to-left directed text. </body> </html>
ین مثال نتیجه ی زیر را تولید خواهد کرد
This is how IE 5 renders right-to-left directed text.
وقتی که ویژگی dir در داخل برچسب Html استفاده می شود، مشخص می کند که چگونه متن در کل داکیومنت نمایش داده می شود. وقتی در برچسب دیگری مورد استفاده قرار بگیرد، مسیر متن را برای محتوای مربوط به آن برچسب کنترل می کند. ویژگی lang این ویژگی به شما کمک می کند تا زبان اصلی استفاده شده در یک داکیومنت را نشان دهید، اما این ویژگی فقط برای سازگاری معکوس با ورژن های قدیمی تر HTML در HTML حفظ شده است. این ویژگی به وسیله ی ویژگی xmllang در داکیومنت های جدید HTML جایگزین شده است.
مقادیر ویژگی lang کدهای دو کاراکتری زبان استاندارد ۶۳۹-ISO می باشند. Codes Language HTML 639 ISO را برای لیست کاملی از کدهای زبان چک کنید.
مثال
<!DOCTYPE html> <html lang="en"> <head> <title>English Language Page</title> </head> <body> This page is using English Language </body> </html>
ویژگی xmllang
این ویژگی جایگزین xhtml برای ویژگی lang می باشد. مقدار ویژگی xmllang باید یک کد ۶۳۹-ISO می باشد، همانطور که در بخش قبل بیان شد.
ویژگی های عمومی
در اینجا جدولی را می بینید که برخی دیگر از ویژگی هایی که در برچسب های HTML مفید می باشند،را نشان می دهد.
۱.align
مقادیر: راست، چپ، مرکز
کاربرد: برچسب ها را به طور افقی تنظیم می کند.
۲.valign
مقادیر: بالا، وسط، پایین.
کاربرد: برچسب ها را به طور عمودی در یک عنصر HTML تنظیم می کند.
۳. bgcolor
مقادیر: numeric, hexidecimal, RGB values
کاربرد: پشت یک عنصر یک رنگ پس زمینه قرار می دهد.
۴. background
مقادیر: URL
کاربرد: پشت یک عنصر یک تصویر پس زمینه قرار می دهد.
۵. id
مقادیر: d User
کاربرد: عنصری را برای استفاده با Style Cascading CSS Sheets نام می برد
۶. class
مقادیر: Defined User
کاربرد: عنصری را برای استفاده با Style Cascadi Sheets طبقه بندی می کند.
۷. width
مقادیر: e Numeric
کاربرد: عرض جدول ها، تصاویر و یا سلول های جدول ها را مشخص می کند.
۸. height
مقادیر: e Numeric
کاربرد: طول جدول ها، تصاویر و یا سلول های جدول ها را مشخص می کند.
۹. title
مقادیر: d User
کاربرد : تیتر عناصر را پاپ آپ می کند.
قالب بندی در HTml
اگر با پردازشگر word کار می کنید باید با بولد کردن (bold ،(ایتالیک کردن و آندرالین کردن متن آشنا باشید. این ها فقط سه گزینه از ده گزینه موجود برای چگونگی ظاهر شدن متن در HTML و XHTML می باشند.
بولد کردن متن
هرچیزی که بین عنصر
<b>…</b>
قرار می گیرد به صورت بولد ظاهر می شود، مانند مثال زیر
مثال
<!DOCTYPE html> <html> <head> <title>Bold Text Example</title> </head> <body> <p>The following word uses a <b>bold</b> typeface.</p> </body> </html>
مثال باال نتیجه ی زیر را در بر خواهد داشت
The following word uses a bold typeface.
ایتالیک کردن متن
هر چیزی که بین عناصر
<i>…</i>
قرار بگیرد به صورت ایتالیک ظاهر می شود، مانند مثال زیر
مثال
<!DOCTYPE html> <html> <head> <title>Italic Text Example </title> </head> <body> <p>The following word uses a <i>italicized</i> typeface.</p> </body> </html>
مثال باال نتیجه زیر را تولید خواهد کرد
The following word uses a italicized typeface.
آندرالین کردن متن
هر چیزی که بین عناصر
<u>…</u >
قرار بگیرد به صورت آندرالین ظاهر می شود، مانند مثال زیر
<!DOCTYPE html> <html> <head> <title>Underlined Text Example</title> </head> <body> <p>The following word uses a <u>underlined</u> typeface.</p> </body> </html>
خط کشیدن روی متن
هر چیزی که بین گزینه های …</strike> قرار بگیرد، با یک strikethrough نمایش داده می شود که خط باریکی می باشد که روی متن کشیده می شود، همانطور که در مثال زیر مشاهده می کنید
<!DOCTYPE html> <html> <head> <title>Strike Text Example</title> </head> <body> <p>The following word uses a <strike>strikethrough</strike> typeface.</p> </body> </html>
فونت monospaced
محتوای عنصر <tt>…</tt >به فونت monospaced نوشته می شود. اکثر فونت ها با عنوان فونت هایی با عرض متغیر شناخته شده اند، زیرا حروف مختلف دارای عرضهای مختلف هستند ( به عنوان مثال حرف m عریض تر از حرف I می باشد.) به هرحال در فونت monospaced تمام حروف دارای عرض یکسان می باشند.
مثال
<!DOCTYPE html> <html> <head> <title>Monospaced Font Example</title> </head> <body> <p>The following word uses a <tt>monospaced</tt> typeface.</p> </body> </html>
متن superscript ( چاپ شده در بالا)
محتوای عنصر<sub>…</sub > در بالا نوشته می شود، فونت استفاده شده برای آن همان فونت کاراکترهای اطراف آن می باشد، اما به اندازه ی نصف یک کاراکتر بالاتر از دیگر کاراکترها نمایش داده می شود.
مثال
<!DOCTYPE html> <html> <head> <title>Subscript Text Example</title> </head> <body> <p>The following word uses a <sub>subscript</sub> typeface.</p> </body> </html>
متن مندرج
هرچیزی که بین عنصر <ins>…</ins >قرار بگیرد به عنوان متن مندرج نمایش داده می شود.
مثال
<!DOCTYPE html> <html> <head> <title>Inserted Text Example</title> </head> <body> <p>I want to drink <del>cola</del> <ins>wine</ins></p> </body> </html>
متن حذف شده
هر چیزی که بین عنصر <del>…</del> ظاهر شود با عنوان یک متن حذف شده نمایش داده می شود.
مثال
<!DOCTYPE html> <html> <head> <title>Deleted Text Example</title> </head> <body> <p>I want to drink <del>cola</del> <ins>wine</ins></p> </body> </html>
متن بزرگتر
محتوای عنصر<big>…</big > اندازه فونت را بزرگتر از متن اطراف نشان می دهد. مانند مثال زیر
مثال
<!DOCTYPE html> <html> <head> <title>Larger Text Example</title> </head> <body> <p>The following word uses a <big>big</big> typeface.</p> </body> </html>
ممنون که در این جلسه هم با ما همراه بودید در این جلسه به یادگیری ویژگی ها در html پرداخته شد. برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید.
دیدگاه ها