آموزش گام به گام و تصویری 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 isablock element,andwill start onanewline.</p>
</body>
</html>
|
همانطور که می بینید عنصر div در یک خط جدید شروع به کار کرده است! اگر به آن یک رنگ پس زمینه بدهیم بهتر مشخص می شود:(ایران گستر)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPEhtml>
<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 isablock element,andwill start onanewline.</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 isthe capital city of England.It isthe most populous city inthe United Kingdom,withametropolitan area of over13million inhabitants.</p>
<p>Standing on the River Thames,London has beenamajor settlement fortwo millennia,its history going back toits 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 isan inline element,andwill notstart onanewline.</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
|
<!DOCTYPEhtml>
<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 isan inline element,andwill notstart onanewline.</p>
</body>
</html>
|