HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"]
HTML[/caption]
id ها و کاربرد آن ها
در زبان
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 خاصی می سازیم:(ایران گستر)
|
|
<h2 id="C4">Chapter4</h2>
|
سپس برایش لینک تعیین می کنیم:(ایران گستر)
|
|
<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> استفاده کنید:
|
|
<iframe src="URL"></iframe>
|
باید آدرس صفحه ی وبی که می خواهید در صفحه ی خود نمایش دهید را به src بدهید.
همچنین می توانید برای iframe ها طول و عرض (width و height) تعریف کنید.
به مثال زیر توجه فرمایید:(ایران گستر)
|
|
<!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 نیز انجام دهید:(ایران گستر)
|
|
<iframe src="https://www.roxo.ir/best-code-editors/"style="height:200px;width:300px;"></iframe>
|
اگر بخواهید حاشیه ی دور iframe را حذف کنید می توانید border را اینطور بنویسید:(ایران گستر)
|
|
<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
:: بازدید از این مطلب : 25
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
عضو شوید
عضویت سریع
آمار مطالب
آمار بازدید
