آموزش HTML – فصل پانزدهم: آی دی (Id)

استفاده از خاصیت Id در زبان HTML

خاصیت id یک آی دی مخصوص برای یک المان اچ تی ام ال تعیین میکند (مقدار باید در کل پرونده اچ تی ام ال یکتا باشد).

مقدار id میتواند در سی اس اس و جاوا اسکریپت استفاده شود تا اعمال معینی بر روی یک المان منحصر به فرد با آی دی مشخص انجام شود.

در سی اس اس برای انتخاب کردن یک المان با یک آی دی مخصوص، یک کاراکتر شارپ (#) بنویسید و در ادامه آی دی آن المان را بنویسید.

از سی اس اس برای استایل دادن به یک المان با آی دی “myheader” اینگونه می توان استفاده کرد:

نکته : خاصیت id را میتوان بر روی هر المان اچ تی ام ال استفاده کرد ولی همانطور که گفتیم هر آی دی فقط برای یک المان

نکته: مقدار id هم مانند کلاس به بزرگی و کوچکی حروف حساس است یعنی به هر صورت که آن را مشخص کردید برای احضار آن مقدار دوباره باید با همان دقت نوشته شود.

نکته:  مقدار id باید حداقل یک کاراکتر باشد و نباید فضای سفید داشته باشد مثل space tab و غیره.

فرق ما بین Class و Id در زبان HTML

یک المان اچ تی ام ال باید یک id خاص مخصوص به خودش داشته باشد در صورتی که نام کلاس میتواند به وسیله چند المان استفاده گردد:

مثال:

نکته: میتوانید برای آشنایی بیشتر با سی اس اس از آموزش سی اس اس نتران استفاده کنید.

بوک مارک با id و لینک

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

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

برای ساختن یک بوک مارک شما در نخست باید بوک مارک را ساخته و سپس یک لینک به آن اضافه کنید.

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

مثال:

اول یک بوک مارک با خاصیت id را بسازید:

سپس یک لینک به بوک مارک در خود صفحه اضافه کنید:

یا یک لینک به همین بوک مارک در صفحه ای دیگر اضاف کنید:

استفاده از خاصیت id در جاوا اسکریپت

جاوا اسکریپ میتواند با id مشخص شده یک المان به آن المان دسترسی پیدا کند با استفاده از متود getElementById() :

مثال:

اینگونه می توانید از خاصیت id برای دستکاری یک متن با جاوا اسکریپت استفاده کنید:

function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}

نکته: جاوا اسکریپت را در فصل جاوا اسکریپت در اچ تی ام ال بخوانید یا در آموزش های جاوا اسکریپت نتران با آن بیشتر آشنا شوید.

در ادامه آموزش گام به گام زبان HTML، مطلب آموزش HTML – فصل شانزدهم: آی فریم ها (iframes) را مطالعه کنید.