آموزش HTML - تگ های نوشتاری

در این درس با برخی دیگر از تگ های HTML که برای نوشتن و نمایش شکل های مختلف متن استفاده می شوند ، آشنا خواهیم شد

متن تاکید شده در HTML

هر متنی که بین تگ های em قرار بگیرد به عنوان متن تاکید شده در نظر گرفته می شود . شکل نمایش تگ em در اکثر مرورگرها با تگ i یکسان است و بصورت ایتالیک نمایش داده می شود . تفاوت اصلی تگ em و i همانطور که برای موارد مشابه در درس قبلی توضیح داده شد ، از لحاظ معنای ایجاد شده توسط تگ و همچنین نحوه رفتار با تگ توسط مرورگرها و موتورهای جستجو می باشد .

مثال

<!DOCTYPE html>
<html dir="rtl">

   <head>
      <title>مثال متن تاکید شده</title>
   </head>
	
   <body>
      <p>
          متنی که در ادامه آورده شده است
          <em>یک متن تاکید شده</em> 
          می باشد.</p>
   </body>
	
</html>

کد بالا به شکل زیر نمایش داده می شود

متن تاکید شده در HTML

هایلایت متن در HTML

برای علامت زدن بخشی از متن یا هایلایت کشیدن روی متن در HTML از تگ mark استفاده می کنیم .

مثال

<!DOCTYPE html>
<html dir="rtl">

   <head>
      <title>مثال هایلایت متن</title>
   </head>
	
   <body>
      <p>
          متنی که در ادامه آمده
          <mark>متن هایلایت شده</mark> 
          می باشد
       </p>
   </body>
	
</html>

کد بالا به شکل زیر نمایش داده می شود :

متن مهم در HTML

هر متنی که داخل تگ strong قرار بگیرد به عنوان متن مهم در نظر گرفته می شود . نحوه نمایش تگ strong مشابه با تگ b می باشد و تفاوت آن ها در معنای ایجاد شده توسط تگ برای متن می باشد .

مثال

<!DOCTYPE html>
<html dir="rtl">

   <head>
      <title>مثال متن مهم</title>
   </head>
	
   <body>
      <p>عبارتی که در ادامه آورده شده 
          <strong>یک عبارت مهم</strong>
          می باشد.
       </p>
   </body>
	
</html>

نتیجه مثال بالا به شکل زیر می باشد

درج متن مهم در html

نمایش شکل کامل متن مخفف در HTML

اگر در متن خود از یک کلمه مخفف استفاده کرده اید ، می توانید با استفاده از تگ abbr ، این امکان را به کاربر دهید که با آوردن نشانگر موس بر روی متن ، کلمه اصلی را مشاهده کند . همچنین این تگ ظاهر متفاوتی به کلمه مخفف می دهد .

مثال

<!DOCTYPE html>
<html dir="rtl">

   <head>
      <title>متن مخفف</title>
   </head>
	
   <body>
      <p>
         یکی از آزمون های معتبر زبان انگلیسی در دنیا آزمون
         <abbr title = "International English Language Testing System">
          IELTS
         </abbr>
        می باشد
     </p>
   </body>
	
</html>

نتیجه به این شکل در دسترس خواهد بود

عبارات مخفف در html

تگ مشخص کردن مخفف

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

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

مثال

<!DOCTYPE html>
<html dir="rtl">

   <head>
      <title>مثال عبارت مخفف</title>
   </head>
	
   <body>
      <p>در این درس ما تگ های ویرایش متن در  
       <acronym>HTML</acronym>
        را بررسی می کنیم
        </p>
   </body>
	
</html>

مثال بالا به شکل زیر نمایش داده می شود

مخفف در html

جهت متن

عنصر <bdo>...</bdo> مخفف Bi-Directional Override است و برای نادیده گرفتن جهت متن فعلی استفاده می شود. و حروف متن را از آخر به اول نمایش می دهد

مثال

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>مثال نمایش برعکس حروف</title>
   </head>

   <body>
      <p>این متن از آخر به اول نمایش داده حواهد شد</p>
      <p><bdo dir = "ltr">این متن از آخر به اول نمایش داده حواهد شد</bdo></p>
   </body>

</html>

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

مثال bdo در html

شرایط ویژه

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

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

مثال

<!DOCTYPE html>
<html dir="rtl">

   <head>
      <title>تعریف اصطلاح خاص</title>
   </head>
	
   <body>
      <p>
         منظور از
         <dfn>ریسپانسیو</dfn>
         وب سایت هایی هستند که با توجه به ابعاد نمایشگر شکل خود را تغییر می دهند
      </p>
   </body>
	
</html>

کد بالا به شکل زیر نمایش داده می شود

تگ dfn در html

متن نقل قول

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

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

مثال

<!DOCTYPE html>
<html dir="rtl">

   <head>
      <title>مثال نقل قول</title>
   </head>
	
   <body>
      <p>تعربف زیر از
         XHTML 
        از وب سایت
         W3C
         گرفته شده است</p>

      <blockquote>
         XHTML 1.0 اولین توصیه W3C برای XHTML است که در ادامه آمده است
          از کارهای قبلی روی HTML 4.01، HTML 4.0، HTML 3.2 و HTML 2.0.
       </blockquote>
   </body>
	
</html>

کد بالا نتیجه زیر را ایجاد می کند

تگ blockquote در html

علامت نقل قول

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

مثال

<!DOCTYPE html>
<html>

   <head>
      <title>مثال علامت نقل قول</title>
   </head>
	
   <body>
      <p>
         عبارت روبرو
         <q>در داخل علامت نقل قول</q>
         قرار گرفته است
       </p>
   </body>
	
</html>

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

عبارت روبرو «در داخل علامت نقل قول» قرار گرفته است

منبع و مرجع متن

اگر متنی را از منبعی دیگر در محتوای خود می آورید ، می‌توانید منبعی آن را بین تگ <cite> ... </cite> مشخص کنید .

محتوای عنصر <cite> به طور پیش‌فرض به صورت ایتالیک نمایش داده می شود

مثال

<!DOCTYPE html>
<html dir="rtl">
   
   <head>
      <title>مثال منبع در html</title>
   </head>
   
   <body>
      <p>
         مطالبی که مطالعه نمودید پژوهشی بود بر مقاله
         <cite>استانداردهای اچ تی ام ال توسط سازمان استاندارد وب</cite>.</p>
   </body>
   
</html>

مثال بالا به شکل زیر نمایش داده می شود

نحوه ارجاع به منبع در html

کد های کامپیوتری و برنامه نویسی

برای نمایش کدهای کامپیوتری و برنامه نویسی در صفحات وب به وسیله html از تگ code استفاده می شود . کدهای موجود در این عنصر با فونت پیشفرض monospaced نمایش داده می شود .

مثال

<!DOCTYPE html>
<html dir="rtl">
   
   <head>
      <title>مثال کد کامپیوتری</title>
   </head>
   
   <body>
      <p>متن معمولی <code>This is code</code> متن معمولی</p>
   </body>
   
</html>

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

نمایش کد برنامه نویسی در html

متن صفحه کلید

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

مثال

<!DOCTYPE html>
<html dir="rtl">
   
   <head>
      <title>مثال متن صفحه کلید</title>
   </head>
   
   <body>
      <p>
          متن  
          <kbd>من میخواهم طراحی سایت یاد بگیرم</kbd> 
          را با کیبورد وارد نمایید
       </p>
   </body>
   
</html>

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

تگ kbd در html

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

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

مثال

<!DOCTYPE html>
<html>
   
   <head>
      <title>مثال متغیر برنامه نویسی</title>
   </head>
   
   <body>
      <p><code>document.write("<var>user-name</var>")</code></p>
   </body>
   
</html>

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

نمایش کد برنامه نویسی در html

خروجی برنامه

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

مثال

<!DOCTYPE html>
<html dir="rtl">
   
   <head>
      <title>مثال خروجی نرم افزار</title>
   </head>
   
   <body>
      <p>
            نتیجه برنامه ی نوشته شده بصورت عبارت 
            <samp>سلام بر همگی</samp>
            نمایش داده می شود
       </p>
   </body>
   
</html>

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

تگ samp در html

متن آدرس

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

مثال

<!DOCTYPE html>
<html dir="rtl">
   
   <head>
      <title>مثال آدرس</title>
   </head>
   
   <body>
      <address>آدرس محل در بین این دو تگ درج می شود</address>
   </body>
   
</html>

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

درج آدرس در html

قالب بندی متن - درس قبلی

درس بعدی - متا تگ ها