آموزش گام به گام و تصویری 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 | <!DOCTYPE html> <html> <head> <style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> </head> <body> <h2>The id Attribute</h2> <p>Use CSS to style 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 | <!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>An HTML page can only have one unique id applied to one specific element, while a class name can be applied to multiple elements.</p> <!-- A unique element --> <h1 id="myHeader">My Cities</h1> <!-- Multiple similar elements --> <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> |
bookmark چیست؟
bookmark های HTML با bookmark های مرورگرتان متفاوت هستند اما مفهوم یکسانی دارند. در مرورگر ها اگر صفحه ای را bookmark (در فارسی نام های «نشانک»، «چوب الف» و … برایش انتخاب شده است) کنید، آدرس آن را برای بعد ذخیره کرده اید اما در HTML اگر قسمتی از صفحه را bookmark کنید به کاربر اجازه می دهید که سریعا به آن قسمت منتقل شود. اگر صفحه یا صفحات شما بسیار طولانی هستند و دارای عناوین متعددی می باشند، bookmark ها می توانند به کاربران شما کمک زیادی بکنند.(ایران گستر)
برای ایجاد یک bookmark باید قسمتی را انتخاب کنید و سپس لینکی به آن اضافه کنید. زمانی که کاربر روی آن لینک کلیک کند به قسمت مورد نظر منتقل می شود. به مثال زیر توجه کنید:(ایران گستر)
ابتدا یک عنصر (معمولا تگ های h1 و …) با id خاصی می سازیم:(ایران گستر)
1 | <h2 id="C4">Chapter 4</h2> |
سپس برایش لینک تعیین می کنیم:(ایران گستر)
1 | <a href="#C4">Jump to Chapter 4</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><a href="#C4">Jump to Chapter 4</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>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> |
اضافه کردن 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 in JavaScript</h2> <p>JavaScript can access an element with a specified id by using the getElementById() method:</p> <h1 id="myHeader">Hello World!</h1> <button onclick="displayResult()">Change text</button> <script> function displayResult() { document.getElementById("myHeader").innerHTML = "Have a nice day!"; } </script> </body> </html> |
در این خروجی باید روی دکمه ی موجود در سمت راست (قسمت خروجی) کلیک کنید تا متوجه تغییر صفحه و نحوه ی دسترسی به myHeader بشوید.(ایران گستر)
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 use the height and width attributes to specify the size of the iframe:</p> <iframe src="https://www.roxo.ir/best-code-editors/" height="300" width="600"></iframe> </body> </html> |
البته می توانید تعیین اندازه را از طریق 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 for a Link</h2> <iframe height="300px" width="100%" src="https://www.roxo.ir/plus" name="iframe_a"></iframe> <p dir='rtl' align='center'><a href="https://www.roxo.ir/best-code-editors/" target="iframe_a">بهترین ویرایشگر برنامه نویسی کدام است؟</a></p> </body> </html> |