مقدمه:

در مقاله تگ های پایه ای HTML به معرفی و بررسی کلی پایه ای ترین تگ های html خواهیم پرداخت و موارد کاربرد آنها را بیان خواهیم نمود.

تگ های هیدینگ

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

مثال

<!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

تگ پاراگراف

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

مثال

<!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.

بیشتر بخوانید:  المنت های HTML

Here is a second paragraph of text.

Here is a third paragraph of text.

تگ لاین بریک

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

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

مثال

<!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

محتوای میانی

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

مثال

<!DOCTYPE html>
<html>

   <head>
      <title>Centring Content Example</title>
   </head>
	
   <body>
      <p>This text is not in the center.</p>
      
      <center>
         <p>This text is in the center.</p>
      </center>
   </body>
	
</html>

این قطعه کد نتیجه زیر را خواهد داد:

This text is not in the center.

This text is in the center.

بیشتر بخوانید:  HTML چیست؟

خطوط افقی

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

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

مثال

<!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

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

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

حفظ قالب بندی

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

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

بیشتر بخوانید:  صفات در HTML

مثال

<!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) 
}

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

فضاهای بدون شکست

فرض کنید می خواهید از عبارت “۱۲ مرد عصبانی” استفاده کنید. در اینجا ، شما نمی خواهید که یک مرورگر بین دو خط “۱۲ ، عصبانی” و “مردان” را شکاف ایجاد کند:

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

در این حالت ها، در جایی که نمی خواهید مرورگر کلاینت متن را بشکند، باید از موجودیتی به نام فاصله بدون شکست یا متصل &nbsp به جای فاصله معمولی استفاده کنید. به عنوان مثال، هنگام کد نویسی “۱۲ مرد عصبانی” در یک پاراگراف ، باید از چیزی مشابه کد زیر استفاده کنید:

مثال

<!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.”

در مقاله تگ های پایه ای HTML با مهمترین تگ های html و کاربرد آنها آشنا شدیم در مقاله بعدی با المنت های html آشنا خواهیم شد.


سیامک قربانی پور

سیامک قربانی پور هستم؛ مدیر عامل شرکت "آبتین ارتباط ایرانیان"؛ دانش آموخته کارشناسی ارشد مدیریت فناوری اطلاعات. موضوع فعالیت شرکت ما به شماره ثبت 1050، برنامه نویسی، طراحی وبسایت و شبکه های کامپیوتری هست. از سال 94 تا 96 به مدت دو سال مشاور مرکز رشد و کسب و کار پارک علم و فناوری چهارمحال و بختیاری بودم اما الان کسب و کار خودم رو در زمینه برنامه نویسی و طراحی وبسایت دارم. همچنین در زمینه مسائل کسب و کاری به علاقه مندان مشاوره هایی رو ارائه می دهم و مطالبی رو در این زمینه خصوصا در مورد کسب و کارهای حوزه فناوری اطلاعات و ارتباطات در این وبسایت منتشر می کنم.

0 دیدگاه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

20 − سه =

تائید دیدگاه فعال است. دیدگاه شما ممکن است کمی طول بکشد تا ظاهر شود.

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.