• صفحه اصلی
  • هاست حرفه ای
    • هاست مخصوص وردپرس
    • هاست سی پنل آلمان
    • هاست سی پنل ایران
    • هاست نمایندگی
    • هاست دانلود
    • هاست ربات تلگرام
    • هاست آزمایشی
  • سرور مجازی
    • سرور مجازی پر سرعت SSD
    • سرور مجازی با هارد HDD
  • قالب وردپرس vip رایگان
    • فروشگاهی
    • همه منظوره
    • شرکتی
    • مشاهده همه موضوعات
  • گواهی SSL
  • دامنه
    • جستجو و ثبت دامنه
    • هزینه ثبت دامنه ها
  • پشتیبانی
    • ارسال درخواست پشتیبانی
    • ارتباط با ما / درباره ما
    • آموزش هاستینگ
    • آموزش HTML
    • قوانین
    • کسب درآمد در آپ وب
ورود به سایت
✕

آموزش جامع عناصر بلوکی(Block) و عناصر درون خطی(Inline) در HTML

اموزش html

عنصر Block و inline در HTML

در این بخش از آموزش های HTML میخواهیم با عناصر یا تگ های بلاکی یا Block و اینلاینی یا Inline در زبان HTML آشنا شویم.

هر عنصر HTML بسته به نوع عنصر آن یک مقدار نمایش پیش فرض دارد.

بطور کلی حالت نمایش تگ های HTML به ۲ صورت میباشد:

  • نمایش بلاکی یا Block یا تمام عرضی
  • نمایش درون خطی یا Inline یا بین تگی

بلوک HTML و عناصر درون خطی

عناصر Block-level

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

مانند:

  • <div>
  • <h1> – <h6>
  • <p>
  • <form>

مثال:

1
2
<p>سلام به آپ وب خوش آمدید</p>
<div>سلام به آپ وب خوش آمدید</div>

توضیح مثال بالا:

همانطور که پیش تر توضیح داده شد تگ های p و div در دسته تگ های بلاکی قرار میگیرند یعنی تمام عرض سطر را به خود اختصاص میدهند.

ما با استفاده از زبان CSS به این تگ ها حاشیه داده ایم، فقط برای اینکه ببینید تمام عرض سطر را به خود اختصاص میدهند.

در اینجا لیست کامل تگ های بلاکی یا block در HTML آمده است:

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>–<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

عناصر درون خطی یا inline در HTML

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

مانند:

  • <span>
  • <a>
  • <img>

مثال:

1
2
3
4
5
6
7
8
<body>
<a href="https://upweb.ir/">سایت فروش هاست آپ وب</a>
<span>Upweb</span>
<i>Upweb</i>
<b>Upweb</b>
</body>

نتیجه:

 

در  مثال بالا از چندین تگ اینلاینی ( تگ های a و span و i و b ) استفاده شده است ،همانطور که گفتیم تمامی تگ های اینلاینی در یک سطر درکنار یک دیگر قرار میگیرند.

در اینجا لیست کامل تگ های درون خطی یا inline در HTML آمده است:

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>

مثال ترکیبی از عناصر اینلاینی و بلاکی در HTML:

استفاده از تگ اینلاینی در داخل تگ بلاکی ( یعنی استفاده از span در داخل p )

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<style>
 
.mysite{
color:white;
padding:2px 5px;
}
 
.cr{background-color:#F44336;}
.cb{background-color:#2196F3;}
.cg{background-color:#4CAF50;}
.cs{background-color:#607D8B;}
 
</style>
</head>
<body>
 
<p> WebSite <span class="mysite cr">upweb.ir</span> آموزش جامع </p>
<p> WebSite <span class="mysite cb">upweb.ir</span> آموزش جامع </p>
<p> WebSite <span class="mysite cg">upweb.ir</span> آموزش جامع </p>
<p> WebSite <span class="mysite cs">upweb.ir</span> آموزش جامع </p>
 
</body>
</html>

 

عنصر <div> در HTML

عنصر <div> مانند یک ظرف برای نگهداری سایر عناصر HTML می ماند یعنی عملا هرچیزی را داخل تگ div میشود قرار داد.

عنصر <div> دارای صفات موردنیاز نیست، اما هر دو سبک و کلاس مشترک هستند.

هنگامی که با CSS مورد استفاده قرار می گیرد، عنصر <div> می تواند به سبک بلوک های محتوا مورد استفاده قرار گیرد:

مثال:

1
2
3
4
5
6
7
8
9
10
11
12
13
<body dir="rtl">
 
<div class="mydiv bg-green">
<h2>بخش اول</h2>
<p>سایت فروش هاست آپ وب سایت فروش هاست آپ وب سایت فروش هاست آپ وب سایت</p>
</div>
 
<div class="mydiv bg-blue">
<h2>بخش دوم</h2>
  <p>سایت فروش هاست آپ وب سایت فروش هاست آپ وب سایت فروش هاست آپ وب سایت</p>
</div>
 
</body>

عنصر span در HTML

تگ span که در دسته تگ های اینلاینی ( Inline ) قرار دارد، تگی است که با استفاده از آن میتوان یک تکه از محتوا را بصورت درون سطری ( یاهم درون تگی یاهم درون خطی ) مشخص کرد.

مثال:

1
2
3
4
5
6
7
8
<body>
 
<h1> tag span </h1>
 
<p>salam khobi? <span style="color:blue;font-weight:bold">mamnoon</span> shoma chetorid? <span style="color:darkolivegreen;font-weight:bold">besyar ali</span> </p>
 
</body>
</html>

نکته

  • تگ span در حالت عادی هیچ استایل خاصی نداره ولی خب ما با استفاده از CSS میتونیم به این تگ استایل بدیم.

خلاصه ی فصل

دو مقدار نمایش وجود دارد: بلوکی(Block) و عناصر درون خطی(Inline)

یک عنصر در سطح بلوک همیشه از یک خط جدید شروع می شود و تمام عرض موجود را اشغال می کند
یک عنصر درون خطی روی یک خط جدید شروع نمی شود و فقط به اندازه لازم عرض می گیرد
عنصر <div> یک سطح بلوک است و اغلب به عنوان یک محفظه برای سایر عناصر HTML استفاده می شود
عنصر <span> یک محفظه درون خطی است که برای علامت گذاری بخشی از یک متن یا بخشی از یک سند استفاده می شود.

مطالب مرتبط

6 تیر 1401

آموزش تغییر رمز عبور سی پنل(Cpanel)


ادامه مطلب
4 تیر 1401

نمایش کاربران آنلاین سایت با افزونه WP-UserOnline(کاربران حاضر)


ادامه مطلب
4 تیر 1401

آموزش ورود به cPanel از طریق پرتال


ادامه مطلب

آپ وب خانه امن رویاهای آنلاین شما


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

آپ وب با بیش از 8 سال سابقه در کنار شماست.

نماد اعتماد الکترونیکی

نماد اعتماد

خرید هاست


ارسال تیکت

ارتباط با ما


شماره تماس: 33854475-013
info@upweb.ir

نیاز به پشتیبانی دارید؟

اگر سوالی دارید از طریق تیکت به پشتیبان مطرح نمایید.


ارتباط با ما
© 2022 تمام حقوق برای شرکت هاستینگ آپ وب محفوظ می باشد.
ورود به سایت