‎‎ويژگي شناسهHTML id Attribute -‎

Previous > <Next

‎ويژگيHTML ‎id‎ براي تعريف يگانگي عناصر مورد استفاده قرار ميگيرد .يعني نميتوان ‎بيشتر از يك عنصر در يك سند با يك شناسه داشت.

‎‎كاربرد شناسهUsing The id Attribute -‎

‎ويژگيHTML ‎id‎ براي يك عنصر سند يگ شناسه يگانه مشخص مي نمايد .مقدار id ‎در سند بايد بيشتر از يك بارتكرار نشود.

‎ويژگي‎id‎ براي اشاره بيك نقطه از استايل شيت مورد استفاده قرار ميگيرد.آن همچنين ‎در جاوا اسكريپت براي عمليات روي عنصر خاصي مورد استفاده ميشود.

‎قانون كدينگ شناسه در استايل شيت بدين منوال است كه درابتدا كراكتر‎"#‎"‎ ‎وبدنبال نام شناسه و سپس{ } ‎قرار ميگيرد .در داخل براكت ويژگي لازمCSS نوشته ميشود .فرم كلي مطابق زير

‎#idname { property of CSS}‎

‎در مثال زير عنصر‎<h1>‎ وجود دارد كه به شناسه با نام ‎"myHeader‎"‎ ‎در استايل شيت اشاره ‎ميكند كه بصورت‎#myHeader‎ ظاهر شده است .

‎‎مثال ـ نمونه استفاده شناسه

‎

 <!DOCTYPE html>
<html>
<head>
<style>#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style></head>
<body>
<h1id="myHeader">My Header</h1>
</body>
</html>

‎

‎‎توجه ـ نام شناسه به حروف بزرگ و كوچك حساس است.

‎توجه ـ نام شناسه بايد شامل حداقل يك كراكتر باشد .نميتواند با عدد شروع گردد .كراكترهاي ‎فضاي خالي(blank,tabs, etc) ‎نبايد در آن وجود داشته باشد.

‎‎اختلاف بين كلاس وشناسهDifference Between Class and ID -‎

‎نام كلاس ميتواند در چندين عنصر ازصفحه استفاده شود، اما نام شناسه فقط براي يك عنصر صفحه ‎ميتواند استفاده گردد.

‎‎مثال ـ براي نشان دادن اختلاف كلاس وشناسه

‎

<!DOCTYPE html>
<html>
<head>
<style>/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 
</style></head>
<body>

<h2>Difference Between Class and ID</h2>
<p>A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:</p>


<h1id="myHeader">My Cities</h1>


<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

--(go to editor for change code and run)

‎‎پيوند با شناسهHTML Bookmarks with ID and Links -‎

‎پيونديكه به قسمتي از صفحه ارجاع شود پيوند نشانكي گوئيم .پيوندنشانكي ميتواند به صفحه ‎جاري يا صفحات ديگر باشد

‎پيوند فوق باعث ميشود كه خواننده را به بخش داخلي صفحه مستقيم ارجاع نمايد .اين نوع پيوندها ‎براي صفحات طولاني مفيد مي باشد.

‎براي استفاده از پيوند نشانك ابتدا بايد آن پيوند ايجاد، وسپس به آن لينك نمود هنگاميكه روي ‎پيوند كليك ميشود صفحه مربوطه بمكانيكه نشانك درآن ايجاد شده حركت مي نمايد.

‎مثال ـ پيوند نشانكي در صفحه جاري ‎ابتدا با ويژگي‎id‎ يك نشانك ايجاد ميكنيم مطابق زير

‎

<h2 id="C4">Chapter 4</h2>

‎سپس يك پيوند روي نشانك ايجاد ميشود .مقدار شناسه در بالاc4 اما در پيوند بصورت ‎#c4‎‎استفاده شده است.

‎

p><a href="#C4">Jump to Chapter 4</a></p>

<!DOCTYPE html>
<html>
<body>

<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

--(go to editor for change code and run)

‎با اين پيوند ميتوان به نشانك هاي صفحات ديگر هم لينك نمود .بعنوان مثال دستور زير به نشانك c4‎در صفحه html_demo.htm پيوند ميزند .

‎<a ‎href‎=‎"html_demo.html#c4‎">jump to Chapter 4</a>‎‎

‎Using The id Attribut in Javascript‎

‎‎كاربرد ويژگي‎id‎ درجاوااسكريپت

‎ويژگي‎id‎ همچنين ميتواند براي انجام مواردي با جاوااسكريپت روي عناصر بكار ‎گرفته شود.

‎جاوااسكريپت ميتواند توسط تابع‎getElementById( )‎ و مقدارويژگي شناسه عنصر ‎به آن دسترسي پيداكند.

‎‎مثال ـ تغيير محتوي عنصر توسط جاوااسكريپت با ويژگي شناسه

‎

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

‎‎خلاصه فصلChapter Summary -‎

‎‎ويژگي‎id‎ براي مشخص كردن شناسه منحصر بفرد براي عنصري ازHTML
‎‎مقدار شناسه بايد در يك صفحه براي يك عنصر تعريف شود.
‎ويژگي‎id‎ استفاده شده درCSS وبكار گرفته شده درجاوااسكريپت براي يك ‎عنصر مشخصي ميباشد.
‎‎مقدار‎id‎ به حروف كوچك وبزرگ حساس است.
‎‎ويژگي بكار گرفته شده‎id‎ درHTML بعنوان ايجاد نشانك ميباشد.
‎جاوااسكريپت با تابع‎getElementById( )‎ ومقدار شناسه ميتواند به عنصري ‎درصفحه دسترسي داشته باشد.

Previous >

<Next

‎‎ويژگي شناسهHTML id Attribute -‎

‎‎كاربرد شناسهUsing The id Attribute -‎

‎#idname { property of CSS}‎

--(go to editor for change code and run)

‎‎اختلاف بين كلاس وشناسهDifference Between Class and ID -‎

--(go to editor for change code and run)

‎‎پيوند با شناسهHTML Bookmarks with ID and Links -‎

--(go to editor for change code and run)

‎<a ‎href‎=‎"html_demo.html#c4‎">jump to Chapter 4</a>‎‎

‎Using The id Attribut in Javascript‎

‎‎كاربرد ويژگي‎id‎ درجاوااسكريپت

--(go to editor for change code and run)

‎‎خلاصه فصلChapter Summary -‎

HTML tutorial آموزش اچ تی ام ال

HTML Forms فرمهای اچ تی ام ال

HTML Graphicsگرافیک اچ تی ام ال

HTML Media رسانه

HTML APIs

HTML References

Sitemap Protocol