آموزش زبان HTML (جلسه ۲۱)

آشنایی با Attribute های زبان اچ تی ام ال (html)

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

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

<!DOCTYPE html>
<html>
   
   <head>
       <title>asrefonon</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

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

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

basic-html-colors

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

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان