کامپیوتر پرسش - آموزش رایگان کامپیوتر

فرمتها در HTML – قسمت ششم - کامپیوتر پرسش

کانال تلگرام ما ما را از طریق کانال دنبال کنید.
کامپیوتر پرسش: چیزی را که دیروز نمیدانستی امروز یاد بگیر
شنبه 27 بهمن 1397
مبحث آموزش کامپیوتری بعدی
مبحث بعدی آموزش ورد مایکروسافت زمان انتشار: به زودی
تبلیغات اینجا محل تبلیغات شماست اینجا محل تبلیغات شماست
سخت افزار – آموزش مقدماتی کامپیوتر
سخت افزار – آموزش مقدماتی کامپیوتر
Zorin چیست؟
Zorin چیست؟
پورت ها – آموزش مقدماتی کامپیوتر
پورت ها – آموزش مقدماتی کامپیوتر
Zune چیست؟
Zune چیست؟
Zoomed Video چیست؟
Zoomed Video چیست؟
اخطاریه جدید پلیس فتا درمورد اینستاگرام: ارسال کامنت توهین آمیز جرم است!
اخطاریه جدید پلیس فتا درمورد اینستاگرام: ارسال کامنت توهین آمیز جرم است!
ZX81 چیست؟
ZX81 چیست؟
کوتاه کننده لینک

فرمتها در HTML – قسمت ششم

فرمتها در HTML – قسمت ششم

در این بخش از رسانه کامپیوتر پرسش با شما هستیم با انواع فرمتهای متن در زبان 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 (بدون نیاز به پسورد)

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

جلسه اول

جلسه دوم

جلسه سوم

جلسه چهارم

جلسه پنجم

 

دیدگاه کاربران
    • دیدگاه ارسال شده توسط شما ، پس از تایید توسط مدیران سایت منتشر خواهد شد.
    • دیدگاهی که به غیر از زبان فارسی یا غیر مرتبط با مطلب باشد منتشر نخواهد شد.
نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتیرفرش کد امنیتی

درخواست آموزش کامپیوتر

آموزش مورد نیاز خود را درخواست کنید.

تبلیغات بنری
محل تبليغ شما
آمار سایت
  • تعداد مطالب 147
  • تعداد دیدگاه ها 560
  • بازدید امروز 163
  • بازدید دیروز 421
  • بازدید کل 44,845
کدهای اختصاصی
    جستجو در این وب:

    Google      Yahoo      MSN
    کد متن افکت دار
تبلیغات متنی
هایپرتمپ

دانلود جدیدترین قالب های روز دنیا

www.hypertemp.ir
دانلود فیلم ایرانی جدید

پلان فیلم دنیای فیلم و سریال

Www.PelanFiLm.Com
تبلیغات متنی شما

محل تبلیغات متنی

computerquestion
تبلیغات متنی شما

محل تبلیغات متنی شما

computerquestion