آموزش گام به گام و تصویری HTML قسمت چهاردهم (ایران گستر)
HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"]
HTML[/caption]
عناصر Block
تمام عناصر HTML به صورت پیش فرض دارای مقداری برای خاصیت display خود هستند که به نوع عنصر بستگی دارد. این مقادیر پیش فرض یا block هستند و یا inline.(ایران گستر)
به طور مثال به کد زیر و خروجی آن دقت کنید:(ایران گستر)
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <body> <div>Hello</div> <div>World</div> <p>The DIV element is a block element, and will start on a new line.</p> </body> </html> |
همانطور که می بینید عنصر div در یک خط جدید شروع به کار کرده است! اگر به آن یک رنگ پس زمینه بدهیم بهتر مشخص می شود:(ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <style> #first { background-color: red; } #second { background-color: purple; } </style> <body> <div id="first">Hello</div> <div id='second'>World</div> <p>The DIV element is a block element, and will start on a new line.</p> </body> </html> |
در کد بالا به div اول رنگ قرمز و به div دوم رنگ بنفش داده ایم. حالا با سادگی می توان دید که هر کدام تمام عرض صفحه را گرفته اند و به همین خاطر است که کنار عنصر دیگری قرار نمی گیرند بلکه باید در خط جدیدی ایجاد شوند.(ایران گستر)
نکته: عنصر div معمولا به عنوان نگه دارنده ی دیگر عناصر مورد استفاده قرار می گیرند و به تنهایی کاربرد خاصی ندارد:
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <body> <div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </div> </body> </html> |
عناصر Block شامل تمام تگ های زیر می شوند:(ایران گستر)
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>عناصر Inline
به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <body> <span>Hello</span> <span>World</span> <p>The SPAN element is an inline element, and will not start on a new line.</p> </body> </html> |
حالا مانند مثال قبلی یک رنگ پس زمینه اضافه می کنیم تا بهتر مشخص شود:(ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <style> #first { background-color: red; } #second { background-color: purple; } </style> <body> <span id='first'>Hello</span> <span id='second'>World</span> <p>The SPAN element is an inline element, and will not start on a new line.</p> </body> </html> |
به سادگی مشاهده می شود که هر دو عنصر کنار هم قرار گرفته اند و رنگ پس زمینه ای که برایشان تعیین کرده ایم تنها در محدوده ی خودشان باقی مانده است.
نکته: تگ span معمولا به عنوان نگه دارنده ی قسمتی از متن به کار برده می شود:(ایران گستر)
1 2 3 4 5 6 7 8 | <!DOCTYPE html> <html> <body> <h1>My <span style="color:red">Important</span> Heading</h1> </body> </html> |
عناصر inline در زبان HTML شامل تمام موارد زیر می شوند:
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
کلاس ها
class وجود دارد. class برای تعیین استایل های مشابه در عناصری به کار می رود که نام کلاسشان یکی باشد. برای راحت تر شدن موضوع، class را مانند کلاس های درس واقعی تصور کنید که هر عنصر در آن مانند یک دانش آموز در کلاس واقعی است. درست است که دانش آموزان یک کلاس با یکدیگر تفاوت دارند اما شباهت های بسیاری نیز دارند! در زبان HTML این شباهت، استایل های CSS است.(ایران گستر)در مثال زیر 3 تگ div داریم که برای همه شان یک استایل و کلاس تعریف کرده ایم:
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 | <!DOCTYPE html> <html> <head> <style> .cities { background-color: black; color: white; margin: 20px; padding: 20px; } </style> </head> <body> <div class="cities"> <h2>London</h2> <p>London is the capital of England.</p> </div> <div class="cities"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div> <div class="cities"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div> </body> </html> |
به این صورت می توانیم کدهای تکراری CSS را حذف کنیم و هر سه div را یک جا استایل دهی کنیم. همچنین همانطور که از کد بالا فهمیده اید برای هدف قرار دادن یک کلاس در زبان CSS باید از نقطه استفاده کنیم. به طور مثال:(ایران گستر)
1 2 3 4 5 6 7 | <style> .city { background-color: tomato; color: white; padding: 10px; } </style> |
کلاس های چندگانه
شما می توانید به عناصر HTML بیش از یک کلاس بدهید. برای این کار باید نام کلاس ها را با اسپیس جدا کنید:(ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <style> .city { background-color: tomato; color: white; padding: 10px; } .main { text-align: center; } </style> <body> <h2>Multiple Classes</h2> <p>All three headers have the class name "city". In addition, London also have the class name "main", which center-aligns the text.</p> <h2 class="city main">London</h2> <h2 class="city">Paris</h2> <h2 class="city">Tokyo</h2> </body> </html> |
همانطور که می بینید، در استایل ها ابتدا گفته ایم کلاس city را قرمز رنگ کن و غیره. سپس گفته ایم آن هایی که کلاس main دارند باید وسط چین باشند. نتیجه ی ادغام این دو استایل همان London است که در خروجی مشاهده می کنید.
با اینکه ما در مثال بالا فقط از تگ های h2 استفاده کردیم اما باید بدانید که می توانید یک کلاس را روی تگ های مختلف نیز پیاده سازی کنید. مثال:(ایران گستر)
1 2 | <h2 class="city">Paris</h2> <p class="city">Paris is the capital of France</p> |
به مثال زیر توجه کنید:
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 | <!DOCTYPE html> <html> <body> <h2>Using The class Attribute in JavaScript</h2> <p>Click the button, to hide all elements with the class name "city", with JavaScript:</p> <button onclick="myFunction()">Hide elements</button> <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> <script> function myFunction() { var x = document.getElementsByClassName("city"); for (var i = 0; i < x.length; i++) { x[i].style.display = "none"; } } </script> </body> </html> |
اگر به خروجی کد بالا مراجعه کنید، می بینید که با فشرده دکمه ی Hide elements تمام div ها ناپدید می شوند(ایران گستر)