آموزش html درس سوم :
در جلسات قبل در مورد html و روش ایجاد یک سند html و نحوه ی اجرای آن صحبت کردیم . سپس در مورد تگ های اصلی html و تگ Head و تگ title و.... نیز مثال زدیم . در این درس با سایر تگ ها آشنا خواهیم شد
تگ body :
این تگ در تمامی سند های html نقش بسیار مهمی را دارد . نام این تگ به فارسی بدنه می باشد . یعنی طاهر اصلی سایت و تمامی تگ ها درون این تگ قرار خواهند گرفت .
<DOCTYPE html!>
<html>
<head></head>
<body>
</body>
</html>
این تگ در بر گیرنده ی تمامی تگ هاییست که میخواهند در سایت ما نمایش داده شوند . بنابراین به منظور چیدمان مرتب و داشتن قالبی مشخص از این به بعد تمامی تگ ها را درون تگ Body قرار خواهیم داد .
تگ p : این تگ نمایانگر ایجاد پاراگراف میباشد . هر زمان ما متنی را درون یک تگ پی قرار دهیم آنرا به عنوان یک پاراگراف در نظر خواهد گرفت . در مثال زیر بیشتر با این موضوع آشنا خواهید شد .
<DOCTYPE html!>
<html>
<head></head>
<body>
<h1> عنوان اصلی سایت </h1>
<h2> عنوان سایت با تگ اچ2 </h2>
<p>این یک تگ پی می باشد . تگ های پی شبیه به پاراگراف عمل کرده و متن ها را پشت سر هم و با فاصله ی معین و اندازه ی فونت مشخص نمایش میدهند .</p>
</body>
</html>
با اجرای سند اچ تی ام ال بالا مرورگر برای ما اینگون به نمایش در خواهد آمد :
عنوان اصلی سایت
عنوان سایت با تگ اچ2
این یک تگ پی می باشد . تگ های پی شبیه به پاراگراف عمل کرده و متن ها را پشت سر هم و با فاصله ی معین و اندازه ی فونت مشخص نمایش میدهند .
نکته مهم : تگ های html بصورت کلی دو نوع می باشند : inline level و block level
در مقاله تفاوت تگ های inline level با block level در HTMLبا این موضوع بیشتر آشنا خواهید شد .
اما بصورت کلی باید بگوییم که تگ های inline level بخشی از یک سطر را در بر خواهد گرفت اما تگ های block level تمامی سطر را در بر میگیرند . به عنوان مثال تگ h1 یک تگ block level می باشد . یعنی زمانی که یک تگ h1 در یک سطر قرار میگیرد سایر تگ ها به ترتیب در زیر این تگ قرار خواهند گرفت و این تگ اجازه نمیدهد تگ های دیگر در کنارش قرار بگیرند .
مثال : اگر 2 تگ h1 در کنار یکدیگر قرار بگیرند به دلیل blocl level بودن بصورت زیر نمایش داده خواهند شد اما تگ span یک تگ inline level میباشد و در صورتی که در کنار یکدیگر نوشته شوند تا زمانی که آن خط کامل نشوند به خط بعد نخواهند رفت در مثال زیر کامل تر درک خواهد شد :
<DOCTYPE html!>
<html>
<head></head>
<body>
<h1> عنوان اصلی سایت </h1>
<h1> عنوان سایت با تگ اچ2 </h1>
<span> اولین پاراگراف من </span> <span> دومین پاراگراف من </span>
</body>
</html>
با اجرای سند html بالا مرورگر بصورت زیر برای ما نمایش خواهد داد :
عنوان اصلی سایت
عنوان اصلی سایت 2
اولین پاراگراف من دومین پاراگراف من
همانطور که در مثال بالا مشاهده نمودید تگ های h1 در کنار یکدیگر قرار داشتند اما چون بلاک لول بودند اجازه ی قرار گرفتن در کنار یکدیگر را نداشته و تگ h1 بعدی بصورت خودکار در زیر تگ قبلی خود قرار گرفت اما تگ span به دلیل inline level بودن در کنار یکدیگر قرار گرفتند .
نکته : در آموزش پیشرفته ی html و در آموزش های بعدی طریقه ی در کنار هم قرار گرفتن تگ های blok level را بازگو خواهیم کرد .
در آموزش بعدی شما را با تگ a و تگ div و ویژگیهای آن آشنا خواهیم ساخت .
با INT همراه باشید .