دانلود وردپرس

نسخه 4.4 فارسی

ارسال مقاله

شما هم نویسنده شوید

قالب HTML

کاملا فارسی و راست چین

فارسی سازی

درخواست فارسی سازی

با سلام

با قسمت سوم دوره رایگان آموزشی HTML در خدمت شما عزیزان هستیم.

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

امیدوارم تمرین جلسه قبل یعنی ساختار صفحات HTML و ایجاد اولین صفحه وب رو به نحو احسن انجام داده باشید. در صورتی که به مشکل خوردید یا سوالی داشتید در قسمت نظرات بیان کنید تا در اسرع وقت جواب داده بشه.

خب بریم سراغ جلسه امروز که در مورد قالب بندی متون در HTML هست. همون طور که میدونید یک صفحه اچ تی ام ال دارای متون بسیاری هست و اگر قرار باشه این متون یه قالب و استایل خشک و بی روح داشته باشن کاربر سایت ما از خوندن اونها خسته میشه و بسرعت سایت رو ترک میکنه و در واقع فرار میکنه. :d

بنابراین باید سعی کنیم مطالب و متون صفحات ما یک قالب زیبا و کاربر پسند داشته باشه تا هم به سایت ما یک استایل شیک بده و هم اینکه کاربران از خوندن مطالب و متون لذت وافی و کافی ببرن.

خب بریم سراغ کد نویسی :

اسلحه هاتون (ابزارهای کد نویسی تون) رو به دست بگیرید.

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

اسم فایل هم با خودتون اما من اسامی فایل ها رو به صورت index2.html، index1.html و … ذخیره می کنم.

 

کد های بالا رو در قسمت دوم توضیح دادم. از اینجا به بعد میریم سراغ درس قالب بندی متون در HTML.

  1. تگ b در HTML

اولین تگی که در html برای قالب بندی متن استفاده میشه تگ b هست. متن شماره ۱ با استفاده از تگ b قالب بندی شده. این تگ برای توپر کردن متن بین خودش و به اصطلاح bold کردن استفاده میشه. به مثال زیر توجه کنید:

 

حالا فایل اچ تی امل رو با نام index1.html ذخیره و سپس درون مروگر اجراش می کنیم تا نتیجه رو ببینیم.

تگ b در HTML

همون طور که تو عکس میبینید عبارت Nullers.IR به صورت پر رنگ تر ، چاق تر و تپل تر نسبت به Web Design Tutorials نشون داده شده. خب بریم سراغ تگ دوم

  1. تگ i در HTML

تگ بعدی که در قالب بندی متن استفاده میشه تگ i هست. شماره ۲ رو نگاه کنید. نسبت شماره ۱ چه تغییری کرده؟ بله درسته، انگار یکم کج شده . نه؟

دقیقا، تگ i برای کج کردن یک نوشته استفاده میشه. در واقع حرف i مخفف کلمه Italic هست. کد زیر رو باهم ببینیم :

 

 

کدها رو درون یه فایل جدید به نام index2.html ذخیره می کنیم و نتیجه رو به سرعت می بینیم:

تگ i در HTML

همونطور که در عکس میبینید متن Nullers.IR به صورت کج نوشته شده.

  1. تگ u در HTML

تگ بعدی که برای قالب بندی متون در HTML استفاده میشه تگ u هست. به شماره ۳ دقت کنید و ببینید تفاوتش با شماره ۱ چیه؟ یا جه فرقی با شماره ۳ میکنه؟ درسته یک خط زیرش کشیده شده. به این خط که با استفاده از تگ u ایجاد میشه میگن Underline

کد زیر رو نگاه کنید :

 

و نتیجه رو می بینیم:

تگ s در HTML

      ۴٫ تگ s در HTML

تگ دیگه ای که در HTML برای قالب بندی متون کاربرد داره تگ s هست. به نظرتون این تگ رو کجا ها دیدین؟ تو فروشگاه ها. نه؟ s مخفف کلمه Strike هست. توی سایت های فروشگاهی وقتی برای یک محصول آف یا تخفیف میزارن از این تگ برای قالب بندی قیمت اصلی استفاده می کنن. البته کاربردهای زیادی داره اما این مثال نمونه بارزش هست.
کد زیر رو باهم می نویسیم و ذخیره می کنیم:

 

و نتیجه رو می بینیم:

تگ s در HTML

 

  1. تگ Sup در HTML

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

  1. تگ sub در HTML

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

نکته ۱: تمام تگ هایی که گفته شد هیچ فاصله ای رو نشون نمیدن و شما هر چقدر فاصله یا اینتر در صفحه زده باشید به عنوان یک فاصله حساب میشه. برای درک بهتر کد زیر رو ببینید:

 

و حالا نتیجه رو ببینید :

فاصله ها در HTML

پس میبینید که فاصله درون موتورهای جستجو به صورت پیش فرض حذف میشه و فقط یک فاصله بین کاراکترها قرار میگیره.

نکته ۲ : تمام تگ های بالا که گفتیم خدمت تون از کدوم نوع تگ ها بودن؟ بله تگ های غیر تهی. چون تگ پایانی هم داشتند.

  1. تگ br در HTML

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

برای ایجاد یک خط فاصله یا Enter از تگ br در HTML استفاده می کنیم. کد زیر رو باهم مینویسیم و ذخیره می کنیم :

 

و حالا نتیجه رو می بینیم :

تگ br در HTML

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

تمرینات قالب بندی متون در HTML – قسمت اول :

  1. تگ pre درhtml برای چه کاری استفاده می شود؟ تشخیص بدین این تگ برای چی هست و چه کاربردی داره؟
  2. نام و نام خانوادگی خودتون رو به صورت توپر، کج و زیر خط دار بنویسید.
  3. عبارت ۲ به توان ۲ = ۴ رو بنویسید.
  4. عبارت X با اندیس Y = Z رو بنویسید.
  5. فرض کنید یک محصول دارید. اسم محصول رو بنویسید.خط بعدش یک قیمت اصلی براش تعریف کنید که دارای تخفیف هست و در خط آخر هم قیمت با تخفیف رو بنویسید

امیدوارم تمرینات رو به خوبی انجام بدین.

منتظر نظرات و پیشنهادات تون هستیم.

با تشکر

nullers.ir

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

خبرنامه نالرز

اگر وردپرس بخشی از زندگی شما را تشکیل میدهد , ایمیل خود را در کادر زیر وارد کنید و خود را به طور رایگان عضوی از خانواده +12000 تایی وردپرسی ها کنید !
مطمئن باشید ایمیل شما پیش ما محفوظ است و پاتوق تبلیغاتی ما نخواهد بود