آموزش بلوک در HTML

saber

4 سال پیش

امتیاز دهید post

آموزش بلوک در HTML

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

همه عناصر HTML را می توان به دو دسته طبقه بندی کرد: الف) عناصر سطح بلوک (ب) عناصر درون خطی.

عناصر بلوک

عناصر بلوک بر روی صفحه ظاهر می شوند مثل اینکه قبل و بعد از آنها خط قطع شده است. به عنوان مثال :p> ، <h1> ، <h2> ، <h3> ، <h4> ، <h5> ، <h6> ، <ul> ، <ol> ، <dl> ، <pre> ، <hr /> ، <blockquote> ، و <address> همه عناصر سطح بلوک هستند. همه آنها از خط جدید خود شروع می کنند و هر چیزی که آنها را دنبال کند در خط جدید خود ظاهر می شود.

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

از طرف دیگر ، عناصر درون خطی می توانند در درون جملات ظاهر شوند و لازم نیست که در یک خط جدید از خود ظاهر شوند. b> ، <i> ، <u> ، <em> ، <strong> ، <sup> ، <sub> ، <big> ، <small> ، <li> ، <ins> ، <del> ، < عناصر code> ، <cite> ، <dfn> ، <kbd> و <var> همه عناصر درون خطی هستند.

گروه بندی عناصر HTML

دو تگ مهم وجود دارد که ما اغلب برای دسته بندی تگ های مختلف HTML از آن استفاده می شود: <div> و <span>

تگ <div>

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

مثال

در زیر یک مثال ساده از تگ <div> آورده شده است. ما (Cascading Style Sheet (CSS را در یک درس جداگانه یاد خواهیم گرفت اما ما برای نشان دادن استفاده از تگ <div> از آن استفاده کردیم –

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   
   &lt;head&gt;
      &lt;title&gt;HTML div Tag&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;!-- First group of tags --&gt;
      &lt;div style = "color:red"&gt;
         &lt;h4&gt;This is first group&lt;/h4&gt;
         &lt;p&gt;Following is a list of vegetables&lt;/p&gt;
         
         &lt;ul&gt;
            &lt;li&gt;Beetroot&lt;/li&gt;
            &lt;li&gt;Ginger&lt;/li&gt;
            &lt;li&gt;Potato&lt;/li&gt;
            &lt;li&gt;Radish&lt;/li&gt;
         &lt;/ul&gt;
      &lt;/div&gt;

      &lt;!-- Second group of tags --&gt;
      &lt;div style = "color:green"&gt;
         &lt;h4&gt;This is second group&lt;/h4&gt;
         &lt;p&gt;Following is a list of fruits&lt;/p&gt;
         
         &lt;ul&gt;
            &lt;li&gt;Apple&lt;/li&gt;
            &lt;li&gt;Banana&lt;/li&gt;
            &lt;li&gt;Mango&lt;/li&gt;
            &lt;li&gt;Strawberry&lt;/li&gt;
         &lt;/ul&gt;
      &lt;/div&gt;
   &lt;/body&gt;
   
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h4>This is first group</h4>

<p>Following is a list of vegetables</p>

<ul>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

</div>

<h4>This is second group</h4>

<p>Following is a list of fruits</p>

<ul>

<li>Apple</li>

<li>Banana</li>

<li>Mango</li>

<li>Strawberry</li>

</ul>

</div>

</body>

</html>

خروجی

This is first group
Following is a list of vegetables

Beetroot
Ginger
Potato
Radish
This is second group
Following is a list of fruits

Apple
Banana
Mango
Strawberr

This is first group

Following is a list of vegetables

Beetroot

Ginger

Potato

Radish

This is second group

Following is a list of fruits

Apple

Banana

Mango

Strawberr

تگ <span>

<span> در HTML یک عنصر درون خطی است و می توان از آن برای گروه بندی عناصر درون خطی در یک سند HTML استفاده کرد. این تگ همچنین هیچ تغییری بصری در بلاک ایجاد نمی کند اما هنگام استفاده با CSS معنای بیشتری دارد.

تفاوت تگ <span> با تگ <div> این است که از تگ <span> با عناصر درون خطی استفاده می شود در حالی که از تگ <div> با عناصر سطح بلوک استفاده می شود.

مثال

در زیر یک مثال ساده از تگ <span> آورده شده است. ما (Cascading Style Sheet (CSS را در یک درس جداگانه یاد خواهیم گرفت اما ما برای نشان دادن استفاده از تگ <div> از آن استفاده کردیم –

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML span Tag&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;This is &lt;span style = "color:red"&gt;red&lt;/span&gt; and this is
         &lt;span style = "color:green"&gt;green&lt;/span&gt;&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>This is <span style = "color:red">red</span> and this is

<span style = "color:green">green</span></p>

</body>

</html>

خروجی

This is red and this is green

1	This is red and this is green

منبع.

لیست جلسات قبل آموزش HTML

امتیاز دهید post

نویسنده مطلب saber

آموزش بلوک در HTML

آموزش بلوک در HTML

عناصر بلوک

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

گروه بندی عناصر HTML

تگ <div>

مثال

تگ <span>

مثال

لیست جلسات قبل آموزش HTML

دیدگاه شما

بدون دیدگاه

آموزش بلوک در HTML

عناصر بلوک

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

گروه بندی عناصر HTML

تگ <div>

مثال

تگ <span>

مثال

لیست جلسات قبل آموزش HTML

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه