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

اگر از یک پردازشگر کلمه (مانند، ورد مایکروسافت) استفاده کرده اید، باید با توانایی پررنگ کردن (bold) متن، کج کردن و یا زیرخط دار کردن آشنا باشید؛ این فقط سه گذینه از انواع فرمت متن ها در HTML و XHTML میباشد.

متن پررنگ (bold)

برای پررنگ کردن یک متن در HTML از محتوا را درون عنصر <b>...</b> قرار میدهیم.

مثال:

<!DOCTYPE html>

<html>

       <head>

               <title>bold text example</title>

        </head>

 

<body>

         <p>the following word ueses a <b>bold</b> typeface.</p>

</body>

</html>

 

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

The following word uses a bold typeface.

 

متن Italic (کج کردن)

هر چیزی که در عنصر <i> ... </ i> ظاهر می شود به صورت زیر نمایش داده می شود

مثال:

<!DOCTYPE html>

<html>

          <head>

                  <title>Italic Text Example</title>

           </head>

     <body>

          <p>the following word ueses an <i>italicized</i>typeface.</p>

     </body>

</html>

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

The following word uses an italicized typeface.

 

متن زیرخط دار

هر چیزی که در عنصر <u> ... </ u> ظاهر می شود زیرخط دار نمایش داده می شود؛

مثال:

<!DOCTYPE html>

<html>

           <head>

               <title>Undelined Text Example</title>

            </head>

  <body>

      <p>the following word uses an <u>undelined</u>typeface.</p>

  </body>

<html>

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

The following word uses an underlined typeface.

 

متن خط خورده(strike)

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

مثال:

<!DOCTYPE html>

<html>

      <head>

           <title>Strike Text Example</title>

       </head>

   <body>

          <p>the following word uses a <strike>strikethrough</strike></p>

    </body>

</html>

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

The following word uses a strikethrough typeface.

 

فونت مونو اسپیس

محتوای یک عنصر <tt> ... </ tt> در فونت مونواسپیس نوشته میشود. اکثر فونتها به عنوان فونت متغیر عرض شناخته می شوند زیرا حروف مختلف دارای عرض های مختلف هستند (برای مثال، حرف 'm' بزرگتر از حرف 'i' است). با این حال در فونت مونو اسپیس عرض تمام حروف یکنواخت میشود.

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

<!DOCTYPE html>

     <head>

          <title>Monospaced Font Example</title>

      </head>

 

  <body>

       <p>the following word uses a <tt>monosoaced</tt>typeface</p>

   </body>

</html>

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

The following word uses a monospaced typeface.

 

متن بالانویس

محتوای یک عنصر <sup> ... </ sup> در بالا نوشته میشود؛ شاید برای بعضی ها سوال شود که هنگام استفاده از این عنصر اندازه فونت چه میزان میشود، باید بگوییم که اندازه فونت تغییری نخواهد کرد فقط به اندازه نیم حرف از کلمه های کنار خود فاصله گرفته و بالاتر قرار میگیرد.

مثال:

<!DOCTYPE html>

<html>

         <head>

                <title>Superscript Text Example</title>

          </head>

    <body>

          <p>the following word uses a <sup>superscript</sup>typeface.</p>

     </body>

</html>

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

The following word uses a superscript typeface.

 

متن زیرنوشت

محتوای یک عنصر <sub> ... </ sub> زیر متن نوشته میشود. اندازه فونت تغییری نخواهد کرد فقط به اندازه نیم حرف از کلمه های کنار خود فاصله گرفته و پایین قرار میگیرد.

مثال:

<!DOCTYPE html>

        <head>

              <title>Subscript Text Example</title>

          </head>

   <body>

        <p>The following word uses a <sub>subscript</sub> typeface. </p>

    </body>

 

</html>

نتیجه مشابه زیر خواهد بود:

The following word uses a subscript typeface.

 

متن جایگزین(Inserted Text)

هر چیزی که در عنصر <ins> ... </ ins> ظاهر می شود به عنوان متن درج شده نمایش داده می شود. این تگ معمولا بعد تگ <del> می آید و نمایشگر متن جایگزین شده است.

مثال:

<!DOCTYPE html>

<html>

     <head>

          <title> Inseted Text Example</title>

      </head>

    <body>

       <p>I want to drink <del>cola</del> <ins>water</ins>

     </body>

<html>

مشاهده نتیجه:

I want to drink cola water

 

متن حذف شده (خط زدن)

همانطور که در مثال بالا مشاهده کردید هرچیزی که میان عنصر <del>...</del> قرار میگیرد به عنوان حذف شده نمایش داده میشود.

مثال:

<!DOCTYPE html>

<html>

<head>

<title>Deleted Text Example</title>

<body>

<p>I want to drink <del>cola</del> <ins>water</ins></p>

</body>

</html>

نتیجه:

I want to drink cola wine

 

متن بزرگتر

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

مثال:

<!DOCTYPE html>

<html>

           <head>

                <title> Larger Text Example</title>

            </head>

<body>

<p>The following word uses a <big>big</big>typeface.</p>

نتیجه مشابه زیر خواهد بود:

The following word uses a big typeface.

 

متن کوچکتر

محتوای عنصر <small>...</small> یک اندازه کوچکتر از کلمه های کناری خود خواهد بود مثال:

<!DOCTYPE html>

<html>

      <head>

              <title>Smaller Text Example</title>

     </head>

<body>

    <p>the following word uses a <small>small</small>typeface.</p>

</body>

</html>

نتیجه دستورات بالا همانند زیر خواهد بود:

The following word uses a small typeface.

 

محتوا گروه بندی

عناصر <div> و <span> به شما این امکان را می دهد که چندین عنصر را برای ایجاد بخش یا زیر صفحه ایجاد کنید.

به عنوان مثال، شما ممکن است بخواهید تمامی پاورقی را در یک صفحه درون عنصر <div> قرار دهید تا نشان دهد که تمام عناصر درون عنصر <div> مربوط به پاورقی هستند. سپس شما می توانید یک عنصر را به این عنصر <div> اضافه کنید تا آنها با استفاده از مجموعه خاصی از قواعد استایل ظاهر شوند.

مثال:

<!DOCTYPE html>

<html>

        <head>

            <title>Div Tag Example</title>

         </head>

 

    <body>

          <div id=”menu” align=”middle”>

                 <a href=”/index.htm”>HOME</a>

                 <a href=”/about/contact_us.htm”>Contact</a>

                 <a href=”/about/index.htm”>About</a>

            </div>

 

<div id=”content” align=”left” bgcolor=”white”>

<h5>content Articles</h5>

<p>Actual content goes here....</p>

</div>

</body

 

</html>

نتیجه مشابه زیر خواهد بود:

HOME | CONTACT | ABOUT

Content Articles

Actual content goes here.....

 

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

مثال:

<!DOCTYPE html>

<html>

       <head>

          <title>Span Tag Example</title>

        </head>

 

        <body>

            <p>This is the example of <span style=”color:green”>span tag</span>and the <span style=”color:red”>div tag</span>alongwith CSS</p>

نتیجه:

This is the example of span tag and the div tag alongwith CSS

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

دانلود این مقاله به صورت PDF (بدون نیاز به پسورد)

جهت ورود به جلسات قبل از لینکهای زیر استفاده کنید:

جلسه اول

جلسه دوم

جلسه سوم

جلسه چهارم

جلسه پنجم

 


برچسب ها

میزبانی وب | طراحی وبلاگ | ساخت قالب | آموزش ساخت قالب وبلاگ | آموزش ساخت قالب سایت | آموزش CSS | سی اس اس | آموزش طراحی وبسایت | آموزش طراحی وبلاگ |
آخرین به روزرسانی این مطلب:

2019-01-03T14:52:25


پربازدیدترین

از اینجا می توانیدمحبوب ترین مطالب را مشاهده کنید