استایل و المان های فرمت متن در HTML

استایل و المان های فرمت متن در HTML
ظاهر طراحی HTML
هر عنصر HTML یک استایل پیش فرض دارد، (رنگ پس زمینه سفید است و رنگ متن سیاه) . تغییر استایل پیش فرض عناصر HTML را میتوان با استفاده از مشخصه style عملی کرد. بعنوان مثال در کد زیر رنگ پس زمینه را از سفید تبدیل به خاکستری روشن میکند: ( در مثالها به جای() از علامتهای <> استفاده کنید)
(body style="background-color:lightgrey")
(h1)This is a heading(/h1)
(p)This is a paragraph.(/p)
(/body)
توجه داشته باشید که صفت Bgcolor، در نسخه های قدیمی تر HTML پشتیبانی میشود و در HTML5 معتبر نیست.
♦ صفت style در HTML
سینتکس مشخصه style بصورت "style="property:value میباشد. property یک ویژگی CSS و value یک مقدار CSS است. برای به یاد آوری ویژگی های مهم CSS میتوانید به پست های مربوط به بخش آموزش CSS مراجعه کنید. در آنجا بطور کامل میتوانید با این ویژگی ها آشنا شوید. در اینجا مختصری از این ویژگی ها و عملکرد آنها را میبینید.
♦ رنگ متن در HTML
خاصیت color رنگ متن را تعریف می کند که برای عنصر HTML مورد استفاده قرار گیرد:
(body)
(h1 style="color:blue">This is a heading(/h1)
(p style="color:red">This is a paragraph.(/p)
(/body)
♦ فونتهای HTML
ویژگی font-family فونت عناصر HTML را تعریف میکند: (تگ font نیز فقط در نسخه های قدیمی HTML پشتیبانی میشود و در HTML5 معتبر نیست.)
(body)
(h1 style="font-family:verdana">This is a heading(/h1)
(p style="font-family:courier">This is a paragraph.(/p)
(/body)
♦ اندازه متن HTML
ویژگی font-size اندازه متن را تعیین میکند و در عناصر HTML استفاده میشود.
♦ ترازبندی متن HTML
خاصیت text-align چیدمان افقی متن را در عناصر HTML مشخص میکند:
(body)
(h1 style="text-align:center">Centered Heading(/h1)
(p)This is a paragraph.(/p)
(/body)
المان های قالب بندی متن در HTML
در مثالهای قبلی در مورد استایل و ظاهر طراحی شده HTML، با استفاده از ویژگی style چیزهایی بیان کردیم. HTML همچنین المانها و عناصر خاصی را برای تعریف متن با مفاهیم خاصی تعریف میکند. برای مثال در HTML با استفاده از عناصری مانند "تگ b" و "تگ i" برای فرمت خروجی به شکل bold (به شکل درشت) و italic (حروف مورب) است.
عناصر قالب بندی که در ادامه مشاهده میکنید، برای نمایش انواع خاصی از متن طراحی شده اند:
♦ فرمت bold و strong در HTML
عنصر "b" در HTML متن را به شکل درشت نمایش میدهد، بدون هیچگونه اهمیت اضافی. المان "strong" نیز متن را به شکل درشت نشان میدهد که برای موتور جستجو نسبت به bold اهمیت بیشتری دارد.
(p)This text is normal.(/p)
(p)(b)This text is bold(/b).(/p)
♦ فرمت italic و Emphasized در HTML
تگ "i" نیز متن را به صورت ایتالیک (مورب) نشان میدهد. تگ "em" نیز مثل عنصر i عمل میکند با این تفاوت که متنی که در آن از این تگ استفاده شده است ، از اهمیت بیشتری برخوردار خواهد بود.
♦ قالب بندی small در HTML
تگ "small"متن HTML را بصورت کوچک نشان میدهد.
h2
)HTML
(small
)Small
(/small
) Formatting
(/h2
)
♦فرمت marked در HTML
برای تعریف متن مشخص شده و یا هایلایت در HTML نیز از تگ "mark" استفاده میشود.
♦فرمت deleted در HTML
از تگ "del" برای نشان دادن بخشی از متن که حذف یا برداشته شده است، در عناصر HTML استفاده میشود.
♦ قالب بندی inserted در HTML
عنصر "ins" در HTML جهت تعریف بخشی از متن که مندرج یا اضافه شده به کار میرود.
♦ فرمت subscript در HTML
استفاده از تگ "sub" متنی را که مشخص کرده است بصورت زیر نویس نشان میدهد:
♦ فرمت superscript در HTML
عنصر "sup" در HTML نیز متن را بصورت بالانویس نشان میدهد: