فیلم آموزشی تگ body در HTML

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

همچنین با عناصر inline و block آشنا می شویم و تفاوت بین آن ها را نیز بررسی می کنیم.

در ادامه این فیلم بیان می کنیم که تگ div چیست و چه کاربردی در HTML دارد.

در نهایت تگ span در HTML را توضیح می دهیم.

تگ body در HTML

مقدمه: فیلم آموزشی تگ body در HTML5

در این ویدئو آموزشی ابتدا با تگ body در HTML آشنا می شویم و می گوییم که تگ body چیست و چه کاربردی دارد. این فیلم آموزشی قسمت ششم از آموزش رایگان HTML در سایت وبمستر وردپرس می باشد.

آموزش دوره HTML را با معرفی زبان HTML و تاریخچه ی آن شروع کردیم.

برای دسترسی به کلیه فیلم های آموزش HTML می توانید از این لینک استفاده کنید.

در ادامه این آموزش کاربرد تگ body در HTML را شرح می دهیم. بعد از آن عناصر inline و block و تفاوت بین آنها را خواهیم گفت.

سپس خواهیم گفت که تگ div در HTML چیست و چه کاربردی دارد .همچنین کاربرد تگ span در HTML را بررسی می کنیم.

بخشی را هم به بررسی تفاوت span و div اختصاص می دهیم.

این ویدئو آموزشی، در واقع بخشی از دوره حرفه ای وبمستران وردپرس می باشد که کمی متفاوت تر از سایر دوره هایی است که تا کنون در سطح وب فارسی برگزار شده است.

بعضی از قسمت های این دوره، به صورت رایگان در سایت وبمستر وردپرس در دسترس عموم خواهد بود و سایر آن ها را می توانید با مراجعه به سایت کلوپ وبمستران وردپرس ، دریافت نمایید.

توجه: پیشنیاز برای یادگیری HTML

در نظر داشته باشید برای اینکه بتوانید بر مفاهیم HTML مسلط شوید، باید بدانید که وب از چه اجزایی ساخته شده است و چگونه کار می کند.

در واقع می توان گفت برای وبمستر حرفه ای شدن و وارد شدن به سایر مباحث همچون HTML می باید بر مفاهیم وب و نحوه کار اجزا آن باهم آشنا شوید. به همین منظور، پیشنیاز درک بهتر این دوره، دوره آموزش مقدمات وب می باشد.

برای این منظور می توانید به بخش آموزش مقدمات وب در سایت کلوپ وبمستران وردپرس مراجعه کرده و در این دوره رایگان شرکت نمایید.

دوره آموزشی HTML کاربردی برای وبمستران

در کمتر از ۹ ساعت مثل یک برنامه نویس حرفه ای به HTML مسلط شوید!!!

اگر وبمستر، سئوکار، دیجیتال مارکتر یا صاحب کسب و کار آنلاین هستید، اولین چیزی که باید با آن آشنا باشید، یادگیری HTML می باشد. در غیر این صورت از پس هیچ کدام از کارهای وبمستری خود بر نخواهید آمد. برای ثبت نام در دوره کاربردی HTML در کمتر از ۹ ساعت، از لینک روبرو استفاده کنید.
دوره آموزشی HTML کاربردی برای وبمستران

نمایش فیلم آموزشی تگ body در HTML

در ادامه می توانید فیلم آموزشی رایگان تگ body در HTML را که به همراه توضیح و مثال می باشد، در زیر مشاهده فرمایید. در صورتی که نیاز به دانلود آن دارید، می توانید از لینک های پایین صفحه استفاده نمایید:

تگ head در HTML

توجه : پیشنیاز آموزش « تگ body در HTML »

برای درک بهتر آموزش تگ body در HTML5، باید بدانید که تگ head در HTML چیست و ساختار کلی آن به چه شکلی می باشد. اگر با تگ head در HTML آشنایی ندارید جای نگرانی ندارد، می توانید به قسمت چهارم از سری آموزش های HTML مراجعه کرده یا از طریق لینک روبرو با تگ head در HTML آشنا شوید.

تگ head در HTML

فیلم آموزش «دستور body در HTML» شامل چه بخش هایی می باشد؟

فیلم آموزشی رایگان تگ body در HTML، دارای بخش هایی به شرح زیر می باشد:

body در HTML چیست و چه کابردی دارد؟

در قسمت ابتدایی فیلم، به معرفی تگ body که یکی از ارزشمندترین تگ های HTML است، می پردازیم.

یکی از مهمترین و اساسی ترین تگ های HTML، تگ body می باشد. در حقیقت این تگ پایه و بیس یک سند HTML را تشکیل می دهد.آنچه در مرورگر قابل مشاهده و رویت است در بخش body قرار دارد.وجود تگ body در یک صفحه HTML لازم و ضروری است.

تگ body همان طور که از اسمش مشخص است، بدنه یک صفحه وب را تشکیل می دهد.شما می توانید لینک ها، متن، جداول، تصاویر، لیست ها و بسیاری موارد دیگر که در صفحات وب قابل مشاهده می باشد را در این تگ قرار دهید.

تگ body شامل یک تگ باز (opening tag) و یک تگ بسته (closing tag) است. این تگ بلافاصله بعد از تگ بسته head قرار می گیرد و قبل از تگ بسته html نیز بسته می شود.

تگ body در HTML5 با نسخه قبلی HTML4 چه تفاوت هایی دارد؟

جالب است بدانید که کلیه خصوصیات تگ body در HTML5 پشتیبانی نمی شود و بجای آن باید از CSS استفاده نمود.

خصوصیت هایی از جمله، alink(بیانگر رنگ مربوط به یک لینک فعال)، vlink(بیانگر رنگ مربوط به لینک دیده شده)، link(بیانگر رنگ مربوط لینک های موجود)، background(نشان دهنده یک تصویر پس زمینه)، bgcolor(نشانگر یک رنگ پس زمینه)، text( مشخص کننده رنگ مربوط به متن موجود) دیگر در HTML5 منقضی شده و پشتیبانی نمی گردد.

نکته : کلیه المنت ها یا تگ های HTML می توانند attribute داشته باشند که در واقع اطلاعات اضافی مرتبط با آن المنت می باشد.

مثال تگ body در HTML به صورت زیر است:

<html>
  <head>
    <title>وبمستر وردپرس</title>
  </head>
  <body>
    <p>سلام وبمستر وردپرسی عزیز</p>
  </body>
</html>
تگ بادی در HTML5

عناصر block و inline در HTML

در ادامه این فیلم آموزشی، عناصر یا تگ های block و inline را معرفی می کنیم :

هر یک از تگ های HTML در بخش body برای خودشان یک مقدار پیش فرض برای نمایش دارند( default display value)، که بصورت کلی این مقدار پیش فرض تگ ها یا عناصر، block و inline می باشد.

اینلاین و بلاک
تعریف inline و block

عناصر block در HTML

یک عنصر Block عنصری است که همواره از یک خط جدید شروع می شود و کل عرض(width) را در اختیار خودش می گیرد. همانند p ، form ، div ، h که یکی از معروف ترین عنصر بلاکی، تگ div می باشد.

<body>
  <div>wpwebmaster.ir</div>
  <h1>wpwebmaster.ir</h1>
  <p>wpwebmaster.ir</p>
</body>

عناصر inline در HTML

عناصر Inline همواره از یک خط جدید شروع نمیشوند و width (عرض) یک سطر را به خود اختصاص نمی دهند. بلکه فقط قسمتی را که نیاز دارند اشغال می کنند.

<body>
   <img src="image\wp.jpg" alt="کلوپ وبمستر وردپرس">
   <span>وبمسنر وردپرس</span>
   <a href="www.webmaster.it"></a>
</body>
تفاوت عناصر inline و block

تفاوت عناصر inline و block

عناصر inline و block چه تفاوتی باهم دارند؟

  • عناصر بلاکی تمام عرض یک بلوک را به خود اختصاص می دهد ولی عناصر اینلاینی فقط به اندازه نیاز فضا اشغال می کنند.

  • در عناصر block عنصر بعدی به خط پایین تر منتقل می شود ولی در عناصر inline المان بعدی درست در کنار عنصر قبلی نمایش داده می شود.

تفاوت inline و block
تگ های inline و block

تگ div در HTML

تگ div چیست؟ (Division tag)

همانطور که گفتیم تگ div یکی از مهم ترین عناصر block می باشد که برای کنار هم قرار گرفتن سندهای HTML مورد استفاده قرار می گیرد. در واقع خودش یک container برای سایر المنت ها است.

می توان عنصر div را برای استایل گذاری روی المنت های HTML با بهره گیری از کد‌های CSS مورد استفاده قرار داد. استفاده از استایل (style) و کلاس (class) برای عنصر div متداول است. تگ div class در HTML کاربرد بسیار زیادی دارد.

مثال تگ div بصورت زیر است:

<div style="background-color:red">
  <h3>این یک عنوان است</h3>
  <p>این یک پاراگراف است</p>
</div>
تگ div در HTML5

تگ span در HTML

تگ span چیست؟

تگ span یک تگ درون خطی (inline) محسوب می شود. منظور از درون خطی بودن این است که این تگ می تواند در یک خط در کنار سایر المنت ها و عناصر قرار بگیرد.

در واقع یک container بر روی متن یا text است. استفاده از استایل (style) برای عنصر span رایج می باشد.

مثال تگ span بصورت زیر است:

<p>My mother has <span style="color:gray">gray</span> eyes.</p>
کاربرد تگ span

تفاوت تگ span و div

تگ های div و  span چه تفاوتی باهم دارند؟

اصلی ترین تفاوت تگ div و تگ span در ماهیت آن ها است. تگ div یک تگ block است و برای استایل دهی به بلوک های موجود در صفحه که هرکدام دارای عناصری هستند، استفاده می شود ولی تگ‌ span یک عنصر inline بشمار می رود از آن برای استایل دادن به عناصر صفحه استفاده می شود.

گاهی طراحان وب به اشتباه بجای استفاده صحیح از تگ div از تگ span‌ استفاده می‌کنند.

تگ div در CSS و همچنین تگ span در CSS کاربرد زیادی دارند و کار طراحان وب را در این حوزه آسان کرده است.

<div id="header">
<p>This is <span class="paper">crazy</span> test</p>
</div>
تفاوت span و div

پیشنهاد برای مطالعه بیشتر

قبل از اینکه این مطلب را مطالعه کنید، می باید حتما با تگ در HTML آشنا شوید، در صورتی که با تگ در HTML آشنا نیستید می توانید از طریق لینک زیر استفاده کنید، این آموزش دومین قسمت از این بخش می باشد:

تگ در HTML

نتیجه گیری برای فیلم آموزش «تگ body در HTML»

در این بخش به معرفی تگ body در HTML می پردازیم. در ادامه به نحوه نمایش المنت های HTML به صورت بلاکی یا خطی می پردازیم.

با مهم ترین عناصر HTML که به صورت block هستند و همچنین عناصری که دارای حالت پیش فرض به صورت inline هستند، آشنا می شویم. سپس تگ های div و span را معرفی می کنیم و در نهایت تفاوت بین تگ های div و span را بررسی می کنیم.

ممکن است به نظر شما بعضی از موارد درست نبوده و یا شما موارد بیشتری را بدانید که ما فراموش کرده ایم تا در این فیلم آموزشی، قرار دهیم.

اگر شما از این موارد آگاه هستید، حتما در بخش نظرات عنوان کنید تا آن را به این مقاله اضافه کنیم. در ضمن اگر این مقاله را مفید دیدید، حتما آن را به دوستان خود معرفی کرده یا در شبکه های اجتماعی به اشتراک بگذارید.

نظر شما در مورد این مقاله چیست؟

در ساخت و تهیه این مطلب فیلم آموزش مقدمات وبمستری از مراجع زیر استفاده شده است. شما می توانید با مراجعه به آن ها، اطلاعات بیشتری را بدست آورید:

راهنما برای خواندن سایر مقالات سایت به صورت دسته بندی شده:

شما می توانید از طریق لینک های کاربردی زیر به سایر مقالات سایت که کاملا بصورت طبقه بندی شده وجود دارد، مراجعه نموده و از آن ها استفاده کنید:

بازگشت به صفحه بلاگ وبمستر وردپرس