ام کی اس گرافیک:
دانلود بهترین، جدیدترین و پرکاربرد ترین ابزار گرافیکی
ام کی اس گرافیک:
دانلود بهترین، جدیدترین و پرکاربرد ترین ابزار گرافیکیآموزش HTML (قسمت سوم) : معرفی صفت ها در HTML
در زبان HTML صفت به صورت اصلاح کننده و کنترل کننده ی تگ ها به کار می روند که به این اصل بعدا به خوبی پی خواهید برد . برای مثال : زمانی که در این زبان کد نویسی یک جدول را انجام می دهید در حالت عادی این جدول رنگ پیش فرض و حالت معمولی دارد اما اگر به کد آن بعضی صفات مانند رنگ ، فاصله ی حروف از مرزهای جدول ، قطر مرز جدول و ... را اضافه کنید بهتر می توانید به خواسته ی خود برسید.
در تعریف صفت ها آن ها به 2 گروه تقسیم می شوند :
1- صفاتی که به صورت منحصر به فرد برای یک تگ استفاده می شوند که صفات خصوصی نام دارند.
2- صفاتی که در اکثر تگ ها خاصیت یکسان دارند و تاثیر گذارند که صفات عمومی نام دارند.
خب حالا که با تعریف و کار برد صفات در HTML آشنا شدیم باید بدانیم که در کجا قار داده می شوند.همانطور که در قسمت قبل گفتیم تگ ها معمولا به صورت جفتی استفاده می شوند . جای صفات هم در تگ آغازین است و هر صفت از 2 بخش تشکیل می شود:
1- Name (نام) : نام صفتی که می خواهیم از آن استفاده کنیم. برای مثال صفت align . این صفت در تگ پاراگراف که با حرف P نشان داده می شود نحوه ی چینش حروف را کنترل می کند.
</p>متن مورد نظر به صورت راست چین<p align=”rtl”>
2- value (ارزش ، مقدار): مقدار صفت مورد نظر است. در مثال بالا rtl مقدار صفت align است که در تگ پاراگراف به کار می رود. Value ها همیشه باید در داخل کوتیشن (“”) قرا بگیرند وبا علامت تساوی به نام صفت منتسب شوند .
حالا می توانیم حالتی کلی برای صفات در تگ ها بنویسیم که به صورت زیر است.
<tagname attribute1=”value” attribute2=”value” >content</tagname>
حالا که با طرز استفاده از صفت ها در تگ ها هم آشنا شدیم بهتر است با برخی صفات آشنا شویم. همان طور که گفتیم برخی از صفات در تگ های مختلف استفاده می شود که صفت های عمومی نام دارند.در اینجا به معرفی مهم ترین صفات عمومی می پردازیم.
1-id : از این صفت برای تعیین یک شناسه برای یک عنصر به کارمی رود.شناسه ی مورد نظر باید در صفحه یکتا باشد و تکرار نشود .برای مثال:
<p id=”p10”>متن پاراگراف</p>
2- class: از این صفت برای نسبت دادن کلاسی که به زبان css نوشته شده به یک عنصر استفاده می شود . شاید الان مقداری گیج شده باشید.برای همین کمی بیشتر توضیح می دهم اگر تا به حال با زبان css آشنایی ندارید باید بدانیدکه اکثر جلوه های بصری قالب های وبسایت های گوناگون با کد های این زبان به وجود می آید.برای ایجاد حالت های مختلف در یک صفحه باید ویژگی های مورد نظر را برای یک کلاس مشخص کرد .مثلا کدی می نویسیم مبنی بر چشمک زدن یک کلاس . سپس این کلاس را باید منسوب به یک کد اچ تی ام ال کنیم تا آن ویژگی که در اینجا چشمک زدن است برای کد اچ تی ام ال اعمال شود . معمولا برای استفاده ی بهتر از زبان css در کد نویسی html صفحه را به چندین بخش تقسیم می کنند تا بتوانند کد های css را اختصاصی تر برای یک بخش به کار ببرند. امیدوارم تا حدی به طرز تلفیق این 2 زبان مهم برنامه نویسی تحت وب آشنا شده باشید.
مثال :
<p class=”p-blue”متن پاراگراف</p>
3- dir: این صفت برای ایجاد جهت متن در یک عنصر به کار می رود و 2 حال دارد.
Rtl : این حالت مخفف (right to left) است و باعث می شود که متن از راست به چپ نوشته شود.
Ltr : این حالت مخفف (left to right) است و باعث می شود که متن از چپ به راست نوشته شود.
4- lang : این صفت برای تگ html به کار می رود و زبان اصلی صفحه را مشخص می کند.این ثفت مقادیر en , fa , fr , ar ,..را می پذیرد.مثال:
<html lang=”fa”>
………..
</html>
اگر زبان کلی که در تگ html است در بخشی از صفحه وجود نداشته باشد یعنی زبان آن بخش فرق داشته باشد می توانید در آن بخش کد lang را برای زبان آن بخش اضافه کنید. مثال:
<html lang=”fa”>
<p lang=”en”>this part is in English</p>
</html>
5- style : این صفت برای تعیین یک سری قواعد و مقادیرشان که در زبان css تعریف شده اند برای یک عنصر می توان استفاده کرد.
<p style=”background-color: #accca”>متن پاراگراف</p>
6- این صفت نوعی از متن را دریافت می کند و آن را به صورت tootip نشان می دهد. یعنی زمانی که موس را روی عنصر مورد نظر نگه می دارید این متن نمایش داده می شود.مثال:
<p title=”سایت ما در فیسبوک”>our facebook</p>
7- Contenteditable : این صفت 2 حالت دارد.True و False. که به ترتیب به معنی درست و غلط است. این صفت برای ایجاد یا حذف امکان ویرایش عنصر مورد نظر توسط کاربر استفاده می شود.True برای ایجاد امکان ویرایش عنصر توسط کاربر و False برای از بین بردن این امکان است.شاید خیلی اوقات دیده باشید که در بعضی سایت ها می توانید عکس صفحه را برای خود ذخیره کنید و یا متن مورد نظر را برای خود کپی کنید اما در بعضی دیگ از سایت ها این امکان برای شما فراهم نیست این صفت به وجود آورنده ی این 2 حالت است.مثال:
متن قابل ویرایش:
<p contenteditable=”true”>متن پاراگراف</p>
متن غیر قابل ویرایش:
<p contenteditable=”false”>متن پاراگراف</p>
8-Hidden : این صفت برای مخفی نگه داشتن یک عنصر از دید کاربر در صفحه است.این صفت 2 حالت دارد.True و False.اگر از حالت true استفاده کنید عنصر مورد نظر مخفی می شود و اگ از عنصر false استفاده کنید عنصر نمایان می شود.کاربرد این صفت در جایی است که می خواهید یک عنصر از دید کاربر مخفی باشد تا زمان برقراری یک شرط در استفاده از این کاربرد با استفاده از جاوا اسکریپت این کار بهتر انجام می شود.مثال:
متن مخفی:
<p hidden=”true”>متن پاراگراف</p>
متن نمایان:
<p hidden=”false”>متن پاراگراف</p>
خب در اینجا جلسه ی سوم هم به پایان رسی امیدوارم که تمام صفات را به خبی شناخته باشید چون نقش مهمی در HTML بر عهده دارند.البته شاید کمی حوصله تان سر رفته باشد و یا چون این بخش برایتان جذاب نبوده بخش هایی از آن را نخواندده باشید اما این مطالب حتی اگر به صورت سطحی هم که شده بخوانید تا حد اقل اگر بعدا به آن ها نیاز مند شدید بدانید که در چه بخشی می توانید به آن ها دست پیدا کنید.در جلسه ی بعد به آشنایی با تگ های قالب بندی متون خواهیم پرداخت.تا جلسه ی بعد و کلی مطلب مفید خدا نگهدار!!!!
