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

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش HTML » آموزش HTML – قالب بندی متن
آموزش html - جلسه چهارم قالب بندی متن

آموزش HTML – قالب بندی متن

سلام خدمت همه دوستان در این آموزش HTML – قالب بندی متن میخوایم ادامه مبحث جلسه قبل رو پی بگیریم و با تگ های جدید آشنا بشیم . قبل از شروع آموزش حتماً بهتون پیشنهاد می کنم که آموزش جلسه قبل رو بخونید .

  1. نوشتن متن ها به صورت ضخیم

تگ <B> این تگ باعث می شود کلماتی که بین این تگ و تگ پایانی آن قرار می گیرند به صورت پر رنگ و بولد ( Bold ) نشون داده بشه .

هم چنین تگ <strong> هم متن هارو به صورت ضخیم و برجسته نشون میده و اگه به مثال نگاه کنید می بینید که نتیجه مشابهی دارن. به مثال زیر توجه کنید :

<b/> هر متنی را این جا قرار بدیم به صورت بولد نشون داده خواهد شد .<b>

<strong/> هر متنی که اینجا قرار بگیره به صورت برجسته نشون داده میشه . <strong>

مثال های بالا در مرورگر به این صورت دیده میشن :    هرمتنی را اینجا قرار بدیم به صورت بولد نشون داده خواهد شد .

هر متنی که اینجا قرار بگیره به صورت برجسته نشون داده میشه .

  ۲.  نوشتن متن ها به صورت زیر خط (Underline)

از این تگ ها برای زیر خط دار کردن مطالب استفاده می کنیم .

<u/> این متن با زیر خط نشان داده می شود . <u>

<ins/> این متن با زیر خط نشان داده می شود . <ins>

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

   ۳.  نوشتن متن ها به صورت کج (Italic)

برای کج نوشتن متن از دوتا تگ استفاده می کنیم که به این صورته :

<i/> این متن به صورت کج نشان داده می شود . <i>

<em/> این متن به صورت کج نشان داده می شود . <em>

این دوتا تگ کار مشابهی رو انجام میدن و نتیجه هر دوتای اونا به این صورته :   این متن به صورت کج نشان داده می شود .

   ۴.  نوشتن متن ها به صورت خط خورده 

از تگ های زیر میشه توی سایت های فروشگاهی استفاده کرد مثلاً اگه قیمت یه جنسی تخفیف خورده باشه میشه از این تگ ها استفاده کرد . در html 4 از تگ stricke هم اسفاده می شود ولی این تگ در html 5 حذف شده و دیگر استفاده نمی شود .

<s/>  این متن به صورت خط خورده نشان داده می شود . <s>

<del/> این متن به صورت خط خورده نشان داده می شود . <del>

اینم نتیجه هر دوتا تگ : این متن به صورت خط خورده نشان داده می شود . 

  ۵.  نوشتن متن به صورت زیر نویس (یا همون اندیس دار)

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

<sub/> این نوشته به صورت اندیس کلمه وب سیتی نشان داد میشود. <sub> وب سیتی

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

   ۶. نوشتن متن ها به صورت بالا نویس (توانی)

این تگ برعکس تگ بالایی عمل میکنه یعنی متنی که داخل این تگ قرار بگیره به صورت بالا نویس نشون داده میشه .

<sup/> این متن به صورت بالا نویس کلمه وب سیتی خواهد بود . <sup> وب سیتی

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

 

   ۷. ایجاد یک خط

برای این کار از تگ </ hr> استفاده میکنیم که نیازی به تگ پایانی ندارد . با استفاده از این تگ می تونیم یه خط افقی درست کنیم .

</ hr>

اینم نتیجه :


 

 

شما می تونید برای هر متنی بیش از یه فرمان استفاده کنید ، مثلاً اگه بخواهید یه متنی هم پررنگ و هم کج نشون داده بشه می تونید از دوتا تگ به صورت هم زمان استفاده کنید به مثال زیر نگاه کنید :

<i></b/> متنی که اینجا قرار میگیره هم به صورت بولد هست هم به صورت کج <b><i>

نتیجه هم به این صورت دیده میشه :   متنی که اینجا قرار میگیره هم به صورت بولد هست هم به صورت کج

نکته : آیا ترتیب قرار گرفتن تگ پایانی مهم است ؟؟!!! در جواب باید بگم بله ترتیب قرار گرفتن تگ های پایانی مهم است . ولی در مثال بالا اهمیتی ندارد که کدام تگ اول بسته بشه چون به هر حال ما میخوایم یه متنی داشته باشیم که هم کج باشه هم پررنگ و فرقی نمیکنه کدومش اول و کدومش آخر باشه .

ولی زمانی که ترتیب قرار گرفتن تگ ها مهمه مثلاً اگر تگ پایانی <html/>رو قبل از تگ پایانی <body/> بنویسیم این اشتباهه ، در ادامه به این مبحث اشاره میکنم .

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

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

دانشجوی رشته نرم افزار ، عاشق برنامه نویسی

نظرات کاربران :


  1. محمد گفت:

    با سلام
    در ابتدا تشکر میکنم از سایت خوبتون همچنین در اختیار قرار دادن آموزش جامع به کاربران.
    من فکر میکنم این بخش از آموزش برای کاربران تازه وارد یه مقدر گنگ است.با اینکه نوشتید این بخش برای فرمت دادن به متن است ولی شاید کاربران تازه وارد متوجه تگ های استفاده شده در فرمت تگ نشوند و مثالی در این بخش بتونه به کاربران نا, وارد کمک شایانی کنه.
    مثلا اونها اگر بخوان به اشتباه تگ را به تنهایی استفاده کنند و نیاز هست تا کاربران بدانند که این تگ ها در میان تگ های متنی کاربرد دارد.
    در نهایت تشکر فراوان از زحمات شما بزرگواران

    • رضا طوماری گفت:

      سلام
      فیلم های آموزشی HTML تهیه شده و در وب سایت قرار گرفته شما می تونید از فیلم های آموزشی استفاده کنید چون در فیلم ها به خوبی مثال ها توضیح داده شده است .

جواب سوال چیه ؟ *