Id ها و Iframe ها در زبان HTML

          برنامه نویس 
            بازدید : 33
          جمعه 14 تیر 1398
           نظرات (0)
        

در زبان HTML دسته ای از attribute ها را داریم که id نام دارند. id ها، همانطور که از نامشان مشخص است، آیدی (id) منحصر به فردی را برای عنصری در HTML تعیین می کند. برخلاف کلاس ها، id ها باید منحصر به فرد و غیر تکراری باشند؛ به طور مثال نمی توانیم در یک صفحه 2 عنصر با آیدی یکسان داشته باشیم.

سوال: اگر id دو عنصر را یکی کنیم چه می شود؟

پاسخ: یکی کردن id دو یا چند عنصر باعث توقف برنامه تان نمی شود اما دو مشکل کلی را به وجود می آورد: اول اینکه کار id ها تعیین آیدی و مشخص کردن یک عنصر خاص است. اگر قرار است چند عنصر را مشخص کنیم باید از همان کلاس ها استفاده کنیم. دوم اینکه این کار از نظر HTML غیر معتبر است بنابراین در سئو و رتبه بندی ضرر خواهید کرد.

معمولا از id ها برای هدف گرفتن یک عنصر خاص در صفحه استفاده می شود تا بعدا در جاوا اسکریپت یا CSS مورد استفاده قرار گیرد. در مثال زیر می خواهیم عنصری که id اش برابر با myHeader را تغییر دهیم:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPEhtml>
<html>
<head>
<style>
#myHeader {
  background-color:lightblue;
  color:black;
  padding:40px;
  text-align:center;
}
</style>
</head>
<body>
 
<h2>The id Attribute</h2>
<p>UseCSS tostyle an element with the id"myHeader":</p>
 
<h1 id="myHeader">My Header</h1>
 
</body>
</html>

مشاهده ی خروجی در JSBin

نکات مهم در مورد id:

id ها می توانند روی هر عنصری استفاده شوند و از Attribute های عمومی هستند.
id ها case sensitive هستند؛ یعنی نسبت به بزرگی و کوچکی حروف انگلیسی حساس اند.
مقدار id ها باید حداقل یک کاراکتر داشته باشد و نباید خالی (اسپیس و …) گذاشته شود.

تفاوت id با class چیست؟

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

بگذارید برایتان مثالی بزنم. در قسمت های قبل گفتیم برای درک بهتر، class را به عنوان کلاس درس و عناصر داخل آن را به عنوان دانش آموزان کلاس در نظر بگیرید. دانش آموزان خاص هستند اما دانش آموزانی که داخل یک کلاس هستند علاوه بر تفاوت هایشان، دارای شباهت های پایه ای و مهم هستند (یک مجموعه درس را می خوانند، هم سن هستند، یک هدف دارند و …). عناصر داخل کلاس نیز شباهت های پایه ای دارند.

حالا هر کدام از این دانش آموزان چیزی به نام «شماره ی دانش آموزی» دارند که برای هر کدامشان متفاوت است و از سمت اداره ی آموزش پرورش تعیین می شود. این شماره ی دانش آموزی مانند همان id است! اگر بخواهید تمام دانش آموزان را در سیستم وارد کنید، می نویسید بچه های کلاس فلان… اما اگر بخواهید یک دانش آموز را وارد سیستم کنید، از شماره ی دانش آموزی اش استفاده می کنید.

این مسئله را در مثال زیر مشاهده می کنید:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPEhtml>
<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 ClassandID</h2>
<p>An HTML page can only have one unique id applied toone specific element,whileaclassname can be applied tomultiple elements.</p>
 
<!--Aunique element-->
<h1 id="myHeader">My Cities</h1>
 
<!--Multiple similar elements-->
<h2 class="city">London</h2>
<p>London isthe capital of England.</p>
 
<h2 class="city">Paris</h2>
<p>Paris isthe capital of France.</p>
 
<h2 class="city">Tokyo</h2>
<p>Tokyo isthe capital of Japan.</p>
 
</body>
</html>

مشاهده ی خروجی در JSBin

bookmark چیست؟

bookmark های HTML با bookmark های مرورگرتان متفاوت هستند اما مفهوم یکسانی دارند. در مرورگر ها اگر صفحه ای را bookmark (در فارسی نام های «نشانک»، «چوب الف» و … برایش انتخاب شده است) کنید، آدرس آن را برای بعد ذخیره کرده اید اما در HTML اگر قسمتی از صفحه را bookmark کنید به کاربر اجازه می دهید که سریعا به آن قسمت منتقل شود. اگر صفحه یا صفحات شما بسیار طولانی هستند و دارای عناوین متعددی می باشند، bookmark ها می توانند به کاربران شما کمک زیادی بکنند.

برای ایجاد یک bookmark باید قسمتی را انتخاب کنید و سپس لینکی به آن اضافه کنید. زمانی که کاربر روی آن لینک کلیک کند به قسمت مورد نظر منتقل می شود. به مثال زیر توجه کنید:

ابتدا یک عنصر (معمولا تگ های h1 و …) با id خاصی می سازیم:

 
1

<h2 id="C4">Chapter4</h2>

سپس برایش لینک تعیین می کنیم:

 
1

<ahref="#C4">Jump toChapter4</a>

نتیجه ی نهایی مثال زیر می شود:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

<!DOCTYPE html>
<html>
<body>
 
<p><ahref="#C4">Jump toChapter4</a></p>
 
<h2>Chapter1</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter2</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter3</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2 id="C4">Chapter4</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter5</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter6</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter7</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter8</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter9</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter10</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter11</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter12</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter13</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter14</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter15</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter16</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter17</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter18</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter19</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter20</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter21</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter22</h2>
<p>Thischapter explains ba bla bla</p>
 
<h2>Chapter23</h2>
<p>Thischapter explains ba bla bla</p>
 
</body>
</html>

مشاهده ی خروجی در JSBin

اضافه کردن chapter های اضافی به خاطر این است که صفحه طولانی شود تا بتوانیم اسکرول انجام دهیم.

استفاده از id در زبان جاوا اسکریپت

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html>
<body>
 
<h2>Using The id Attribute inJavaScript</h2>
<p>JavaScript can access an element withaspecified id by using the getElementById()method:</p>
 
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Changetext</button>
 
<script>
functiondisplayResult(){
  document.getElementById("myHeader").innerHTML="Have a nice day!";
}
</script>
 
</body>
</html>

مشاهده ی خروجی در JSBin

در این خروجی باید روی دکمه ی موجود در سمت راست (قسمت خروجی) کلیک کنید تا متوجه تغییر صفحه و نحوه ی دسترسی به myHeader بشوید.

Iframe چیست؟

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

برای تعریف آن باید از تگ <iframe> استفاده کنید:

 
1

<iframe src="URL"></iframe>

باید آدرس صفحه ی وبی که می خواهید در صفحه ی خود نمایش دهید را به src بدهید.

همچنین می توانید برای iframe ها طول و عرض (width و height) تعریف کنید.

به مثال زیر توجه فرمایید:

 



1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
<body>
 
<h2>HTML Iframes</h2>
<p>You can usethe height andwidth attributes tospecify the size of the iframe:</p>
 
<iframe src="https://www.roxo.ir/best-code-editors/"height="300"width="600"></iframe>
 
</body>
</html>

مشاهده ی خروجی در JSBin

البته می توانید تعیین اندازه را از طریق CSS نیز انجام دهید:

 
1

<iframe src="https://www.roxo.ir/best-code-editors/"style="height:200px;width:300px;"></iframe>

اگر بخواهید حاشیه ی دور iframe را حذف کنید می توانید border را اینطور بنویسید:

 
1

<iframe src="https://www.roxo.ir/best-code-editors/"style="border:none;"></iframe>

یکی از نکات جالب این است که شما می توانید در عناصر لینک، attribute ای به نام target را با attribute ای به نام name یکی کنید تا با کلیک روی لینک، iframe باز شود:

 



1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html>
<body>
 
<h2>Iframe-Target foraLink</h2>
 
<iframe height="300px"width="100%"src="https://www.roxo.ir/plus"name="iframe_a"></iframe>
 
<pdir='rtl'align='center'><ahref="https://www.roxo.ir/best-code-editors/"target="iframe_a">بهترینویرایشگربرنامهنویسیکداماست؟</a></p>
 
</body>
</html>

مشاهده ی خروجی در JSBin

به خروجی بالا بروید و سپس روی لینک بهترین ویرایشگر برنامه نویسی کدام است؟ کلیک کنید. متوجه می شوید که مقاله در iframe باز می شود!

امیدوارم از این قسمت لذت برده و استفاده ی کافی را کرده باشید.

منبع: روکسو

ارسال نظر برای این مطلب