آموزش تگ های پایه در HTML

4 سال پیش

امتیاز دهید post

آموزش تگ های پایه در HTML

تگ های هدینگ (heading tags)

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

هر سندی با عنوان (heading)شروع می شود. شما می توانید از عناوین مختلف برای heading خود استفاده کنید. HTML همچنین دارای شش سطح عنوان است که از عناصر <h1> ، <h2> ، <h3> ، <h4> ، <h5> و <h6> استفاده می کند. هنگام نمایش هر عنوان، مرورگر یک خط قبل و یک خط بعد از آن عنوان اضافه می کند.

مثال

Live Demo
&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Heading Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;h1&gt;This is heading 1&lt;/h1&gt;
      &lt;h2&gt;This is heading 2&lt;/h2&gt;
      &lt;h3&gt;This is heading 3&lt;/h3&gt;
      &lt;h4&gt;This is heading 4&lt;/h4&gt;
      &lt;h5&gt;This is heading 5&lt;/h5&gt;
      &lt;h6&gt;This is heading 6&lt;/h6&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

Live Demo

<!DOCTYPE html>

<html>

<head>

<title>Heading Example</title>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

</body>

</html>

نتیجه زیر را ایجاد می کند:

This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

تگ های پاراگراف

تگ <p> راهی برای ساختار متن شما در پاراگرافهای مختلف ارائه می دهد. هر پاراگراف از متن باید بین تگ <p> و پکیج </ p> قرار داشته باشد، همانطور که در زیر نشان داده شده است:

مثال

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

   &lt;head&gt;
      &lt;title&gt;Paragraph Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;Here is a first paragraph of text.&lt;/p&gt;
      &lt;p&gt;Here is a second paragraph of text.&lt;/p&gt;
      &lt;p&gt;Here is a third paragraph of text.&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Paragraph Example</title>

</head>

<body>

<p>Here is a first paragraph of text.</p>

<p>Here is a second paragraph of text.</p>

<p>Here is a third paragraph of text.</p>

</body>

</html>

نتیجه زیر را ایجاد می کند:

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

تگ Line Break

هر وقت از عنصر <br /> استفاده کردید، هر چیزی که آن را دنبال می کند از خط بعدی شروع می شود. این تگ نمونه ای از یک عنصر خالی است، جایی که شما نیازی به تگ باز و بسته ندارید.

تگ <br /> بین کاراکتر های br و خط مورب فاصله دارد. اگر این فضا را حذف کنید، مرورگرهای قدیمی در ارائه خط شکسته با مشکل روبرو می شوند، در حالی که اگر کاراکتر خط مورب را حذف کنید و فقط از <br> استفاده کنید، در XHTML معتبر نیست.

مثال

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

   &lt;head&gt;
      &lt;title&gt;Line Break  Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;Hello&lt;br /&gt;
         You delivered your assignment ontime.&lt;br /&gt;
         Thanks&lt;br /&gt;
         Mahnaz&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Line Break Example</title>

</head>

<body>

<p>Hello<br />

You delivered your assignment ontime.<br />

Thanks<br />

Mahnaz</p>

</body>

</html>

نتیجه زیر را ایجاد می کند:

Hello
You delivered your assignment on time.
Thanks
Mahnaz

Hello

You delivered your assignment on time.

Thanks

Mahnaz

محتوا در مرکز

برای قرار دادن هر محتوا در مرکز صفحه یا هر سلول جدول می توانید از تگ <center> استفاده کنید.

مثال

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

   &lt;head&gt;
      &lt;title&gt;Centring Content Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;This text is not in the center.&lt;/p&gt;
      
      &lt;center&gt;
         &lt;p&gt;This text is in the center.&lt;/p&gt;
      &lt;/center&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Centring Content Example</title>

</head>

<body>

<p>This text is not in the center.</p>

<p>This text is in the center.</p>

</center>

</body>

</html>

نتیجه زیر را ایجاد می کند:

This text is not in the center.

This text is in the center.

This text is not in the center.

This text is in the center.

خطوط افقی

از خطوط افقی (Horizontal lines) برای تجزیه بصری بخشهای یک سند استفاده می شود. تگ <hr> از موقعیت فعلی سند به حاشیه سمت راست خط ایجاد می کند و متناسب با آن خط را می شکند.

به عنوان مثال، ممکن است بخواهید یک خط بین دو پاراگراف مانند مثال داده شده در زیر قرار دهید:

مثال

Live Demo
&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Horizontal Line Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;This is paragraph one and should be on top&lt;/p&gt;
      &lt;hr /&gt;
      &lt;p&gt;This is paragraph two and should be at bottom&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

Live Demo

<!DOCTYPE html>

<html>

<head>

<title>Horizontal Line Example</title>

</head>

<body>

<p>This is paragraph one and should be on top</p>

<hr />

<p>This is paragraph two and should be at bottom</p>

</body>

</html>

نتیجه زیر را ایجاد می کند:

This is paragraph one and should be on top

This is paragraph two and should be at bottom

This is paragraph one and should be on top

This is paragraph two and should be at bottom

دوباره <hr /> تگ نمونه ای از عنصر خالی است، جایی که شما نیازی به تگ باز و بسته ندارید.

عنصر <hr /> بین کاراکترهای hr و خط مورب فاصله دارد. اگر این فضا را حذف کنید، مرورگرهای قدیمی در ارائه خط افقی مشکل دارند، در حالی که اگر کاراکتر خط مورب را حذف کنیم و فقط از <hr> استفاده کنید، در XHTML معتبر نیست

حفظ قالب بندی

بعضی اوقات، می خواهید متن شما دقیقاً از قالب نحوه نوشتن در سند HTML پیروی کند. در این موارد می توانید از تگ از پیش قالب بندی شده <pre> استفاده کنید.

هر متنی بین تگ باز <pre> و بسته </pre>، قالب بندی سند منبع را حفظ می کند.

مثال

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

   &lt;head&gt;
      &lt;title&gt;Preserve Formatting Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;pre&gt;
         function testFunction( strText ){
            alert (strText)
         }
      &lt;/pre&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Preserve Formatting Example</title>

</head>

<body>

<pre>

function testFunction( strText ){

alert (strText)

}

</pre>

</body>

</html>

نتیجه زیر را ایجاد می کند:

function testFunction( strText ){ 
   alert (strText) 
}

function testFunction( strText ){

alert (strText)

}

سعی کنید از همان کد استفاده کنید بدون اینکه آن را درون تگ <pre> … </pre> نگه دارید

Nonbreaking Spaces

فرض کنید می خواهید از عبارت “12 Angry Men.” استفاده کنید. در اینجا، شما نمی خواهید یک مرورگر “12, Angry” و “Men” را در دو خط تقسیم کند.

An example of this technique appears in the movie "12 Angry Men."

1	An example of this technique appears in the movie "12 Angry Men."

به جای یک فضای معمولی. به عنوان مثال، هنگام کدگذاری “12Angry Men”در یک پاراگراف، باید از چیزی مشابه کد زیر استفاده کنید –

مثال

Live Demo
&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Nonbreaking Spaces Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;An example of this technique appears in the movie "12&amp;nbsp;Angry&amp;nbsp;Men."&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

Live Demo

<!DOCTYPE html>

<html>

<head>

<title>Nonbreaking Spaces Example</title>

</head>

<body>

<p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>

</body>

</html>

نتیجه زیر را ایجاد می کند:

An example of this technique appears in the movie "12 Angry Men."

1	An example of this technique appears in the movie "12 Angry Men."

منبع.

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

امتیاز دهید post

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

آموزش تگ های پایه در HTML

آموزش تگ های پایه در HTML

تگ های هدینگ (heading tags)

مثال

تگ های پاراگراف

مثال

تگ Line Break

مثال

محتوا در مرکز

مثال

خطوط افقی

مثال

حفظ قالب بندی

مثال

Nonbreaking Spaces

مثال

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

دیدگاه شما

بدون دیدگاه

آموزش تگ های پایه در HTML

تگ های هدینگ (heading tags)

مثال

تگ های پاراگراف

مثال

تگ Line Break

مثال

محتوا در مرکز

مثال

خطوط افقی

مثال

حفظ قالب بندی

مثال

Nonbreaking Spaces

مثال

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

دیدگاه شما

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

بدون دیدگاه