آموزش html - تگ DIV
عنصر های HTML را از طریق تگ های DIV و یا SPAN گروهبندی می شوند .
تگ div یک عنصر بلاک لول است .( Block level ) به این معنی که درصورتی که مورد استفاده قرار بگیرد تمام حجم آن سطر را اشغال کرده و در بر خواهد گرفت . به منظور آشنایی با این موضوع به مقاله تفاوت تگ های inline level با block level مراجعه نمایید
چند گزینه از عناصر بلاک لول ( block level ) :
تگ <h1>
تگ <p>
تگ <div>
تگ <table>
تگ DIV مانند یک ظرف در نظر گرفته میشود که عناصر و سایر تک ها را درون خود جای خواهد داد . و جهت گروهبندی سایر المان ها و عناصر از این تگ استفاده خواهد شد . صفحات HTML از طریق این تگ مرتب شده و جایگیری خواهند شد .
نحوه ی نوشتن صحیح این تگ به این صورت می باشد . : <div><div>
در سالهی پیش به منظور ایجاد و گروهبندی صفحات HTML از تیبل table استفاده میشد . اما این روش دیگر منسوخ شده و جایگزین آن تگ DIV می باشد که بسیار حرفه ای تر و با دقت بیشتر عمل گروهبندی و قالب بندی سایت را به عهده خواهد گرفت .
عنصر DIV از هیچ کلمه ای گرفته نشده است و معنی خاصی ندارد .
تگ DIV دارای خصوصیات بسیار زیادی می باشد . و با استفاده از CSS میتوان خصوصیات مختلف و بیشماری را به این تگ اضافه نمود . ما برای مثال از CSS دورن تگ استفاده میکنیم . اما به منظور رعایت تمامی استاندارد ها از CSS external style sheet استفاده نمایید . جهت آموزش CSS میتوانید به بخش مقالات و بخش آموزش CSS مراجعه نمایید .
در آموزش های حرفه ای طراحی سایت تمامی موارد با External style sheet انجام خواهد شد.
بنابراین ما به منظور شناخت سریع زبان HTML در مثال های فعلی از سی اس اس درون تگی استفاه میکنیم .
در مثال زیر روش ساخت یک صفحه HTML با استفاده از تگ DIV را برایتان بازگو خواهیم کرد :
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright Beyamooz.com</div>
</div>
</body>
</html>
مثال بالا در مرورگر بصور زیر نمایش داده خواهد شد :
در آموزش های بعدی به دلیل استفاده ی مکرر از تگ DIV بیشتر با نحوه ی کار با آن آشنا خواهید شد .
در آموزش بعدی شما را با تگ <span> آشنا خواهیم ساخت
درس بعدی قالب بندی متن با تگ span »» آموزش HTML – تگ span