تهران ، میدان ولیعصر جنب مترو کوی شاهد پلاک 8 واحد 3
88895790
بازگشت به لیست مقالات » | پنجشنبه 27 آبان 1395 در ساعت 14 : 23 دقیقه | نظرات کاربران ( 0 )
آموزش html  - تگ DIV

آموزش 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>

 

 

مثال بالا در مرورگر بصور زیر نمایش داده خواهد شد :

 

Content goes here

 

 

 

 

 

 

 

در آموزش های بعدی به دلیل استفاده ی مکرر از تگ DIV  بیشتر با نحوه ی کار با آن آشنا خواهید شد .

در آموزش بعدی شما را با تگ  <span>  آشنا خواهیم ساخت

درس بعدی قالب بندی متن با تگ span  »»   آموزش HTML – تگ span

ارسال نظر

عنوان نظر :
نام شما :
ایمیل :