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

4 سال پیش

امتیاز دهید post

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

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

تگ تأکید شده

هر چیزی که در عنصر … ظاهر شود ، به عنوان متن تأکید شده نمایش داده می شود.

مثال

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

   &lt;head&gt;
      &lt;title&gt;Emphasized Text Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;The following word uses an &lt;em&gt;emphasized&lt;/em&gt; typeface.&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Emphasized Text Example</title>

</head>

<body>

The following word uses an emphasized typeface.

</body>

</html>

خروجی

The following word uses an emphasized typeface.

1	The following word uses an emphasized typeface.

تگ علامت گذاری شده

هر چیزی که با عنصر … ظاهر شود، به عنوان علامت گذاری شده با رنگ زرد نمایش داده می شود.

مثال

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

   &lt;head&gt;
      &lt;title&gt;Marked Text Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;The following word has been &lt;mark&gt;marked&lt;/mark&gt; with yellow&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Marked Text Example</title>

</head>

<body>

The following word has been marked with yellow

</body>

</html>

خروجی

The following word has been marked with yellow

1	The following word has been marked with yellow

تگ متن مهم (Strong Text)

هر آنچه در عنصر … ظاهر می شود به عنوان متن مهم نمایش داده می شود.

مثال

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

   &lt;head&gt;
      &lt;title&gt;Strong Text Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;The following word uses a &lt;strong&gt;strong&lt;/strong&gt; typeface.&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Strong Text Example</title>

</head>

<body>

The following word uses a strong typeface.

</body>

</html>

خروجی

The following word uses a strong typeface.

1	The following word uses a strong typeface.

تگ اختصار متن

می توانید یک متن را با قرار دادن آن در تگ باز <abbr> و تگ بسته </abbr> کوتاه کنید.

مثال

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

   &lt;head&gt;
      &lt;title&gt;Text Abbreviation&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;My best friend's name is  &lt;abbr title = "Abhishek"&gt;Abhy&lt;/abbr&gt;.&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Text Abbreviation</title>

</head>

<body>

My best friend's name is <abbr title = "Abhishek">Abhy</abbr>.

</body>

</html>

خروجی

My best friend's name is Abhy.

1	My best friend's name is Abhy.

عنصر مخفف

عنصر <acronym> به شما امکان می دهد متن بین تگ<acronym> و </acronym> مخفف باشد.

در حال حاضر، مرورگرهای اصلی ظاهر محتوای عنصر <acronym> را تغییر نمی دهند.

مثال

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

   &lt;head&gt;
      &lt;title&gt;Acronym Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;This chapter covers marking up text in &lt;acronym&gt;XHTML&lt;/acronym&gt;.&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Acronym Example</title>

</head>

<body>

This chapter covers marking up text in <acronym>XHTML</acronym>.

</body>

</html>

خروجی

This chapter covers marking up text in XHTML

1	This chapter covers marking up text in XHTML

جهت متن

عنصر <bdo> … </bdo> از آن برای تایید جهت متن فعلی استفاده می شود.

مثال

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

   &lt;head&gt;
      &lt;title&gt;Text Direction Example&lt;/title&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt;This text will go left to right.&lt;/p&gt;
      &lt;p&gt;&lt;bdo dir = "rtl"&gt;This text will go right to left.&lt;/bdo&gt;&lt;/p&gt;
   &lt;/body&gt;

&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Text Direction Example</title>

</head>

<body>

This text will go left to right.

<bdo dir = "rtl">This text will go right to left.</bdo>

</body>

</html>

خروجی

This text will go left to right.

This text will go right to left.

This text will go left to right.

This text will go right to left.

اصطلاح خاص (Special Terms)

عنصر <dfn> … </dfn> (یا عنصر تعریف HTML) به شما امکان می دهد تعیین کنید که اصطلاح خاصی را معرفی می کنید. کاربرد آن مشابه کلمات ایتالیک در وسط یک پاراگراف است.

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

مثال

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

   &lt;head&gt;
      &lt;title&gt;Special Terms Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;The following word is a &lt;dfn&gt;special&lt;/dfn&gt; term.&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Special Terms Example</title>

</head>

<body>

The following word is a <dfn>special</dfn> term.

</body>

</html>

خروجی

The following word is a special term.

1	The following word is a special term.

تگ نقل قول

وقتی می خواهید بخشی از منبع دیگر را نقل فول کنید، باید آن را بین تگ های <blockquote> … </blockquote> قرار دهید.

متن درون عنصر <blockquote> معمولاً از لبه های چپ و راست متن اطراف تورفتگی می یابد و گاهی از فونت ایتالیک استفاده می کند.

مثال

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

   &lt;head&gt;
      &lt;title&gt;Blockquote Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;The following description of XHTML is taken from the W3C Web site:&lt;/p&gt;

      &lt;blockquote&gt;XHTML 1.0 is the W3C's first Recommendation for XHTML,following on 
         from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.&lt;/blockquote&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Blockquote Example</title>

</head>

<body>

The following description of XHTML is taken from the W3C Web site:

<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on

from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>

</body>

</html>

خروجی

The following description of XHTML is taken from the W3C Web site:

XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.

The following description of XHTML is taken from the W3C Web site:

XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.

تگ نقل قول های کوتاه

عنصر <q> … </q> هنگامی استفاده می شود که بخواهید نقل قول را در یک دبل کوتیشن اضافه کنید.

مثال

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

   &lt;head&gt;
      &lt;title&gt;Double Quote Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;Amit is in Spain, &lt;q&gt;I think I am wrong&lt;/q&gt;.&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Double Quote Example</title>

</head>

<body>

Amit is in Spain, <q>I think I am wrong</q>.

</body>

</html>

خروجی

Amit is in Spain, I think I am wrong.

1	Amit is in Spain, I think I am wrong.

Text Citations

اگر متنی را نقل قول می کنید، می توانید منبعی را تعیین کنید که آن را بین تگ <cite> باز و بسته </cite> قرار دهد

همانطور که در یک چاپ انتظار دارید، محتوای عنصر <cite> به صورت پیش فرض در متن ایتالیک شده ارائه می شود.

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   
   &lt;head&gt;
      &lt;title&gt;Citations Example&lt;/title&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;This HTML tutorial is derived from &lt;cite&gt;W3 Standard for HTML&lt;/cite&gt;.&lt;/p&gt;
   &lt;/body&gt;
   
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Citations Example</title>

</head>

<body>

This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.

</body>

</html>

خروجی

This HTML tutorial is derived from W3 Standard for HTML

1	This HTML tutorial is derived from W3 Standard for HTML

تگ کد

هر کد برنامه نویسی برای نمایش در یک صفحه وب باید در تگ باز <code> … </code> قرار گیرد. معمولاً محتوای عنصر <code> با فونت تک فاصله ارائه می شود، دقیقاً مانند کد موجود در اکثر کتاب های برنامه نویسی.

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   
   &lt;head&gt;
      &lt;title&gt;Computer Code Example&lt;/title&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Regular text. &lt;code&gt;This is code.&lt;/code&gt; Regular text.&lt;/p&gt;
   &lt;/body&gt;
   
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Computer Code Example</title>

</head>

<body>

Regular text. <code>This is code.</code> Regular text.

</body>

</html>

خروجی

Regular text. This is code. Regular text.

1	Regular text. This is code. Regular text.

تگ صفحه کلید

هنگامی که در مورد رایانه صحبت می کنید، اگر می خواهید به کاربر بگویید که مقداری متن وارد کند، می توانید از عنصر <kbd> … </kbd> برای نشان دادن نوع تایپ کردن استفاده کنید،

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   
   &lt;head&gt;
      &lt;title&gt;Keyboard Text Example&lt;/title&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Regular text. &lt;kbd&gt;This is inside kbd element&lt;/kbd&gt; Regular text.&lt;/p&gt;
   &lt;/body&gt;
   
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Keyboard Text Example</title>

</head>

<body>

Regular text. <kbd>This is inside kbd element</kbd> Regular text.

</body>

</html>

خروجی

Regular text. This is inside kbd element Regular text.

1	Regular text. This is inside kbd element Regular text.

متغیرهای برنامه نویسی

این عنصر معمولاً همراه با عناصر <pre> و <code> برای نشان دادن متغیر بودن محتوای آن عنصر استفاده می شود.

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   
   &lt;head&gt;
      &lt;title&gt;Variable Text Example&lt;/title&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;&lt;code&gt;document.write("&lt;var&gt;user-name&lt;/var&gt;")&lt;/code&gt;&lt;/p&gt;
   &lt;/body&gt;
   
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Variable Text Example</title>

</head>

<body>

<code>document.write("<var>user-name</var>")</code>

</body>

</html>

خزوجی

document.write("user-name")

1	document.write("user-name")

خروجی برنامه

عنصر <samp> … </samp> نشان دهنده خروجی نمونه از یک برنامه ، و اسکریپت و غیره است. باز هم، عمدتا هنگام مستند سازی برنامه نویسی یا برنامه نویسی مفاهیم استفاده می شود.

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   
   &lt;head&gt;
      &lt;title&gt;Program Output Example&lt;/title&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Result produced by the program is &lt;samp&gt;Hello World!&lt;/samp&gt;&lt;/p&gt;
   &lt;/body&gt;
   
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Program Output Example</title>

</head>

<body>

Result produced by the program is <samp>Hello World!</samp>

</body>

</html>

خروجی

Result produced by the program is Hello World!

1	Result produced by the program is Hello World!

تگ آدرس

از عنصر <address> … </address> برای هر آدرس استفاده می شود.

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   
   &lt;head&gt;
      &lt;title&gt;Address Example&lt;/title&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;address&gt;388A, Road No 22, Jubilee Hills -  Hyderabad&lt;/address&gt;
   &lt;/body&gt;
   
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Address Example</title>

</head>

<body>

<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>

</body>

</html>

خروجی

388A, Road No 22, Jubilee Hills - Hyderabad

1	388A, Road No 22, Jubilee Hills - Hyderabad

منبع.

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

امتیاز دهید post

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

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

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

تگ تأکید شده

تگ علامت گذاری شده

تگ متن مهم (Strong Text)

تگ اختصار متن

عنصر مخفف

جهت متن

اصطلاح خاص (Special Terms)

تگ نقل قول

تگ نقل قول های کوتاه

Text Citations

تگ کد

تگ صفحه کلید

متغیرهای برنامه نویسی

خروجی برنامه

تگ آدرس

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

دیدگاه شما

بدون دیدگاه

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

تگ تأکید شده

تگ علامت گذاری شده

تگ متن مهم (Strong Text)

تگ اختصار متن

عنصر مخفف

جهت متن

اصطلاح خاص (Special Terms)

تگ نقل قول

تگ نقل قول های کوتاه

Text Citations

تگ کد

تگ صفحه کلید

متغیرهای برنامه نویسی

خروجی برنامه

تگ آدرس

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

دیدگاه شما

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

بدون دیدگاه