امتیاز دهید:

در زبان اچ تی ام ال (html) همانطور که قبلاً توضیح داده شد تگ ها مسئول شکل دهی به ساختار یک سند اچ تی ام ال هستند. حال زمان هایی در طراحی صفحات وب برای ما پیش می آید که نیاز داریم تگ ها حاوی اطلاعات بیشتری باشند. این اطلاعات اضافی اصطلاحاً Attribute نامیده می شود. به طور کلی Attribute ها همواره داخل تگ ها قرار گرفته و پس از آنها یک علامت مساوی می بایست قرار دهیم و مقادیر Attribute را می بایست داخل دو علامت "   " قرار دهیم. حال اگر بخواهیم چندین دستور را داخل Attribute خود قرار می دهیم می بایست آنها را با یک کاما از یکدیگر مجزا سازیم.
نکته دیگری که در ارتباط با Attribute ها وجود دارد این است برخی از تگ های اچ تی ام ال (html) فقط یکسری از Attribute ها را می توانند شناسایی کنند. بنابراین آشنایی با رابطه مابین تگ های مختلف اچ تی ام ال (html) و Attribute های متناظر با آن ها ضروری به نظر می رسد.

آشنایی با Attribute یی تحت عنوان style
در این بخش از آموزش قصد داریم تا با style ها در زبان اچ تی ام ال آشنا شویم (در آموزش گذشته به طور عملی این Attribute را مورد استفاده قرار دادیم). برای این منظور کدهای زیر را وارد نرم افزار ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
  
   <head>
       <title>Netshahr</title>
   </head>
  
   <body>
       <p>This is a paragraph</p>
   </body>
</html>

حال اگر پس از ذخیره کردن فایل، مرورگر را به روز رسانی می کنیم:

حداقل کدهای موجود در یک سند اچ تی ام ال

حال قصد داریم تا رنگ پس زمینه صفحه سایت خود را تغییر دهیم. برای این منظور کد فوق را به صورت زیر بازنویسی می کنیم:

  
    <body style="background:red;">
        <p>This is a paragraph</p>
    </body>

همانطور که در کد فوق می بینیم از آنجا که می خواهیم رنگ کل صفحه سایت را تغییر دهیم، پس بایستی Attribute مد نظر را به تگ body اضافه کنیم زیرا کلیه عناصری که در یک سند اچ تی ام ال (html) به نمایش در می آیند داخل این تگ قرار دارند. می بینیم که پس از کلمه body یک فاصله قرار داده سپس کلید واژه style را می نویسیم (توجه داشته باشیم که این کلمه می بایست با حرف کوچک نوشته شود). سپس یک علامت مساوی قرار داده علامت های "  " را می نویسیم. در کد فوق می بینیم که دستوری تحت عنوان background-color را نوشته ایم. به خاطر داشته باشیم که حرف اول این دو کلمه می بایست با حرف کوچک نوشته شده و آنها را با یک Dash از یکدیگر مجزا می سازیم (برای تایپ Dash در کیبورهای استاندارد می توان دکمه ای که کنار عدد صفر قرار دارد را فشار دهیم). حال بایستی یک علامت : قرار داده و مقدار مد نظر را بنویسیم. در زبان اچ تی ام ال یکسری از رنگ ها هستند که از پیش تعریف شده اند که از آن جمله می توان به رنگ های white, black, red, blue, green, yellow اشاره کرد که به ترتیب به معنی "سفید، سیاه، زرد، سبز، آبی و قرمز" هستند.
حال فایل خود را ذخیره کرده و مجدد مرورگر فایرفاکس را به روز رسانی می کنیم:

قرمز کردن زنگ پس زمینه یک سند اچ تی ام ال html

 می بینیم که رنگ قرمز روی کل صفحه اعمال شده است.

به طور کلی 140 رنگ استاندارد برای اچ تی ام ال (HTML) در نظر گرفته شده است که در لیست زیر قابل مشاهده اند:

basic-html-colors

در حین استفاده از این رنگ ها به خاطر داشته باشیم که به حروف کوچک و بزرگ نام رنگ ها توجه داشته باشیم.


نظرات
نظرات
  • محمد :

    در پاسخ به mystery

    سلام با تشکر از آموزش خوبتون یه سوال چرا من همین کد رو نوشتم کل صفحه قرمز نشد؟

    سلام
    من توی تمیرن خودم علامت ; رو تو آخر رنگ مورد نظر نذاشتم.شما اینو نذار ببین درست میشه.


    1394/08/10 05:28:17
  • mystery :

    سلام با تشکر از آموزش خوبتون یه سوال چرا من همین کد رو نوشتم کل صفحه قرمز نشد؟


    1394/04/23 17:28:20