آموزش HTML – جلسه سوم ( body )

در این جلسه از سری جلسات آموزش HTML  می خواهیم تگ body را برای شما آموزش دهیم.

همان طور که در مطلب گذشته گفته شد html از دو قسمت مهم تشکیل شده است ، body برای نمایش و ظاهر سایت و head برای معرفی سایت.

 

body در HTML

 

معرفی تگ body :

مهم ترین قسمت یک فایل HTML , قسمت دوم آن یعنی body می باشد. body کل صفحه نمایش را در بر می گیرد که با تگ <body> شروع و با تگ <body/> به پایان میرسد . این تگ بدنه اصلی صفحه HTML را معرفی می کند و شامل کلیه محتویات قابل نمایش در صفحه ازقبیل نوشته ها ، عکس ها ، لینک ها و … است . فقط محتویات این قسمت توسط مرورگر به عنوان خروجی نمایش داده می شوند ( هر آنچه که در این قسمت نوشته شود یعنی در داخل تگ body به صورت مستقیم به کاربران نمایش داده می شود. )

تگ Body پس از تگ Head قرار می گیرد.تمامی عکس ها و فونت ها به کار برده در این تگ قرار می گیرد.شما می توانید سایز قلم،رنگ قلم و سایر مواردی که در صفحات وب دیده می شود را در این تگ تعیین کنید.

 

<html>
<head>

</head>
<body>




</body>
</html>

در کلیه فایلهای HTML   این تگ وجود دارد مگر اینکه بخواهید از عنصر فریم استفاده کنید  که در اینصورت باید  <frameset>  را بکار برید.

 

خصوصیات تگ body  در HTML :

تگ body  مثل دیگر تگ های HTML یک سری خصوصیات مخصوص به خو را دارد که فقط در این تگ کاربرد دارد ( خصوصیات ویژه ) و یک سری خصوصیات دیگر که برای عموم تگ ها وجود دارد ( خصوصیات عمومی ).

از خصوصیات ویژه ی این تگ می توان به موارد زیر اشاره کرد :

  • bgcolor : رنگ پس زمینه body را تعیین میکند . ( در HTML5 پشتیبانی نمی شود )

 

<html>
<body bgcolor=”#ccff00”>

</body>
</html>
  • background : تصویر پس زمینه ی body را مشخص می کند. ( در HTML5 پشتیبانی نمی شود )

 

<html>
<body background=”images/filename.gif”>

</body>
</html>

  • alink : مشخص کننده رنگ لینک های فعال در صفحه است . ( در HTML5 پشتیبانی نمی شود )

روش تایین رنگ : ۳ روش وجود دارد

  1. نام رنگ را بنویسیم مثل : RED , BLUE ,BLACK
  2. استفاده از RGB مثل : rgb (10,65,232)
  3. استفاده از # مثل : fff#

 

 <html>
<body alink="green">


<a href="www.solutionz.ir">solutionz</a>



<a href="www.solutionz.ir">HTML Tutorial</a>

</body>
</html> 
  • link : رنگ لینک مشاهده نشده  را تعیین میکند. ( در HTML5 پشتیبانی نمی شود )

 

 <html>
<body link="blue">


<a href="www.solutionz.ir">solutionz</a>



<a href="www.solutionz.ir">HTML Tutorial</a>

</body>
</html> 

  • text : رنگ متن را  تعیین میکند. ( در HTML5 پشتیبانی نمی شود )

 

 <html>
<body text="green">


<h1>solutionz</h1>




<a href="http://www.solutionz.ir">Visit solutionz!</a>

</body>
</html> 
  • vlink : رنگ لینک مشاهده شده را تعیین میکند . ( در HTML5 پشتیبانی نمی شود )

 

<html>
<body vlink="red">


<a href="www.solutionz.ir">solutionz</a>



<a href="www.solutionz.ir">HTML Tutorial</a>

</body>
</html> 

 

طراحان وب امروزه از ایت خصوصیات خیلی کم استفاده می کنند و سعی میکنند از کدهای CSS که توسط همه مرورگر ها پشتیبانی می شوند استفاده کننده ( در فایل CSS استایل دهی میکنند )

برخی خصوصیات عمومی تگ body در HTML :

 

  • class: میتوانیم به body  کلاس دهیم برای استایل دهی در CSS
<html>
<body class="class name">

</body>
</html>

 

  • id :  میتوانیم به body ای دی  دهیم برای استایل دهی در CSS
<html>
<body id="contact-page">

</body>
</html>
  • lang : از این ویژگی، برای تنظیم زبان محتوای عنصر استفاده می شود
  • style : از این ویژگی، برای تنظیم استایل های CSS استفاده می شود. این روش به روش درون تگی معروف است.

 

 <body style="background-color:powderblue;">



<h1>This is a heading</h1>




This is a paragraph.


</body>

 

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

  • onload :  زمانی انجام میشود که body  بارگزاری شود

 

<html>
<body onload="alert('Hello, World!');">

</body>
</html>
  •  onkeydown : این رویداد زمانی روی می دهد که، کاربر در حال فشار دادن یک دکمه است.

 

<html>
<body onkeydown="alert('Hello, World!');">
</body>
</html>
  • onmousedown : این رویداد، زمانی روی می دهد که، کاربر دکمه ی موس را روی یک عنصر فشار دهد.

 

 

<html>
<body onmousedown="alert('Hello, World!');">


srgethrthrhfh

</body>
</html>

 

البته رویداد های بسیار زیادی وجود دارد که ما فقط چند نمونه از آن را برای شما آموزش دادیم . تمامی رویداد ها در یک مطلب به صورت کامل برای شما آموزش داده خواهد شد

 

 

 

 


                
                
                
                
                






                

              
نگارش و انتشار توسط ابراهیم عادلی

فعال در زمینه های : طراحی رابط کاربری UI ، توسعه و طراحی وب ، تولید محتوی مارکتینگ گوگل

دیدگاه شما

ایمیل شما نزد ما محفوظ خواهد بود.