آموزش گام به گام و تصویری HTML قسمت پانزدهم (ایران گستر)
HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"]
HTML[/caption]
id ها و کاربرد آن ها
سوال: اگر 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>
|
نکات مهم در مورد id:(ایران گستر)
- id ها می توانند روی هر عنصری استفاده شوند و از Attribute های عمومی هستند.
- id ها case sensitive هستند؛ یعنی نسبت به بزرگی و کوچکی حروف انگلیسی حساس اند.
- مقدار id ها باید حداقل یک کاراکتر داشته باشد و نباید خالی (اسپیس و …) گذاشته شود.
تفاوت id با class چیست؟
بگذارید برایتان مثالی بزنم. در قسمت های قبل گفتیم برای درک بهتر، 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>
|
bookmark چیست؟
bookmark های HTML با bookmark های مرورگرتان متفاوت هستند اما مفهوم یکسانی دارند. در مرورگر ها اگر صفحه ای را bookmark (در فارسی نام های «نشانک»، «چوب الف» و … برایش انتخاب شده است) کنید، آدرس آن را برای بعد ذخیره کرده اید اما در HTML اگر قسمتی از صفحه را bookmark کنید به کاربر اجازه می دهید که سریعا به آن قسمت منتقل شود. اگر صفحه یا صفحات شما بسیار طولانی هستند و دارای عناوین متعددی می باشند، bookmark ها می توانند به کاربران شما کمک زیادی بکنند.(ایران گستر)
برای ایجاد یک bookmark باید قسمتی را انتخاب کنید و سپس لینکی به آن اضافه کنید. زمانی که کاربر روی آن لینک کلیک کند به قسمت مورد نظر منتقل می شود. به مثال زیر توجه کنید:(ایران گستر)