illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

آموزش طراحی قالب از صفر - جلسه سوم تگ های html 2

15567 ۱۰ تیر ۹۱

سلام

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

خوب برگردیم سر درسمون!:کدی که تا انتهای جلسه پیش دیدید رو با تغییر عکس بکگراند اینجا می بینید:

که در اون نحوه ی انتقال بکگراند رنگ صفحه عکس بکگراند و اسم صفحه و انکودینگ صفحه رو مشخص کردیم.این جلسه می خوایم با یکسری دیگه از کدهای HTML آشنا بشیم.خوب بیاید اول یه عکس توی صفحمون بذاریم همونطور که گفتم و واضحه دیگه این کدها قراره قالب رو شکل بدن و توی BODY قرار می گیرند تگی که برای قرار دادن عکس استفاده میشه تگ <img> هست که تگ پایانی هم نداره یعنی بصورت منفرد استفاده می شه و نبایدآخرش از تگ مثلا </img> استفاده کنید!خوب حالا به بررسی توضیحات این تگ می پردازیم.

1-مهمترین توضیح یا مشخصه ی این تگ آدرس اون هست!یعنی اینکه بگیم عکس دلخواهمون تو چه آدرسی قرار داره این مشخصه رو src می نامیم که حالا در کدی که پایین میذارم می بینید نحوه ی کارکردش رو می بینیم باهم.

2-مشخصه ی بعدی توضیحات عکس هست می تونید یه توضیحاتی راجع به تگتون تو این بنویسید تا وقتی بازدیدکننده نشانگر ماوسش رو روی عکس نگه داشت اون توضیحات نمایش داده بشه!این مشخصه هم title نام داره.

3-مشخصه ی آخری که به نظرم دونستنش خوبه حاشیه یا border هست که می تونید با اون دور عکستون یه حاشیه بندازین و قالبتون رو زیبا کنید اگر دوست داشته باشید.خوب حالا کدمون میشه مثلا:

*نکته : اگر کلا توضیحات border رو ننویسید تو تگتون بصورت پیشفرض border = 0 در نظر گرفته میشه.

میبینید که عکستون با یه حاشیه ای اومده و اگه نشانگر ماوستون رو روش نگه دارید عبارت توی title تون که اینجا 7Learn هست نشون داده میشه.خوب حالا بیاید یه بار دیگه همین عکس رو بدون حاشیه و title توی خط بعد بذاریم یعنی:

خوب همونطور که مبیینید با این که کدمون رو تو خط بعد زدیم اما عکس بقل عکس قبلی تکرار شده خوب باید بدونیم که فاصله های برنامه نویسی هیچ ربطی به فاصله های نمایشیمون ندارن البته خوب شاید واضح هم باشه!

برای رفتن به خط بعد از تگ br استفاده می کنیم این تگ هم نیازی به تگ پایانی نداره و هرجا بزنید چه عکس چه متن چه هرچیزی تو کد HTML تون رو به خط بعد می بره حالا فرض کنید می خوایم عکس دوممون رو سه خط پایینتر ببریم کدمون میشه:

خوب حالا بیاید یکم با متن ها کار کنیم!برای نوشتن متن هیچ کدی لازم نیست کافیه متنتون رو هرجایی که می خواین بنویسید مثلا اگر می خواید خط بعد عکستون متن باشه کافیه یه br بعد عکستون بزنید و متنتون رو بنویسید مثلا اینطوری:

*نکته : رنگ فونت بصورت پیشفرض مشکی هست!

خوب به همین دلیل تو این بکگراند مشکی خوب نوشتمون معلوم نمیشه حالا نظرتون چیه که واسه دیده شدنش رنگش رو زرد کنیم و سایزش رو بزرگتر؟برای اینکار باید با تگ font آشنا بشیم تگ فونت برای تعیین رنگ سایز و نوع(اسم)فونت به کار میره و به تگ پایانی هم نیاز داره حالا بیاید با توضیحات این تگ آشنا شیم:

1-رنگ فونت : برای تعیین رنگ فونت از مشخصه ی color استفاده می کنیم برای تعیین رنگ می تونیم از هردو روشی که در رنگ صفحه استفاده کردیم استفاده کنیم یعنی هم کد رنگ و هم اسم رنگ

2-سایز فونت:برای تعیین سایز یا اندازه ی فونت هم از مشخصه ی size استفاده می کنیم برای تعیین اندازه متن 3 روش یعنی سه رده بندی سایزی وجود داره یکی اینهکه سایز رو مساوی عددی مثل 5 می ذارید و تمام!اما دو روش دیگه هم وجود دارند یکی -5 و یکی +5 هستند!یعنی چی؟سایز +5 بزرگتر از 5 عادی هست و سایز -5 کوچکتر از 5 عادی خیلی ساده است!

3-اسم فونت : برای تغییر فونت هم از مشخصه ی face استفاده می شه و می تونید توش راحت اسم فونتتون رو بنویسید.

*نکته : فونت پیشفرض Arial هست.

*نکته : دقت کنید که باید از فونت هایی که توی وب وجود دارن و پیشفرض ویندوز هستن استفاده کنیدچون مثلا اگه از فونی مثل Roya استفاده کنید ممکنه فردی اون فونت رو نداشته باشه بعد نتونه مطالبتون رو خوب ببینه من فونت Tahoma رو برای هر زبانی توصیه می کنم خوبه.

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

یکی دیگه از روش های سایز بندی متن ها تگ های h هستند این تگ ها نیازمند تگ پایانی هستند و به اینصورت هستند که h1 بزرگترین و h6 کوچکترین تگ هست حالا این چجوری استفاده میشه؟ببینید:

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

1-اولا که تگ های h برای بزرگ کردن متن به کار نمی رن اکثرا برای بزرگ کردن تیتر های متن ها استفاده می شن به همین دلیل بعد از خودشون یه فاصله می اندازند انگار که خودشون یه br هم تو خودشون دارن!

2-موتور های جستجوگر تگ های h رو بهتر پیدا می کنند واسه همین بیشتر تو عنوان ها و تیتر ها به کار میره

یکی از خوبی های HTML این هست که برای کار راحت با متون و جمع و جور بودنشون می تونید اونارو پاراگراف بندی می کنه و هروقت یه پاراگراف جدید ایجاد کنید خود به خود یکم فاصه دو خط بیشتر میشه و میره به پاراگراف بعدی پاراگراف با تگ p نشون داده میشه و نیازمند تگ پایانی نیز هست:

خوب اگر دقت کنید کلا عکس ها و متن ها چپ چین هستند و زبان پارسی راست چین!برای راست چین کردن قالب از مشخصه ی dir استفاده می کنیم حالا جای این تو کدوم تگه؟فرقی نمی کنه شما می تونید هم تو نگ BODY استفاده کنید که کل قالب اینطوری شه یا توی تگ P یا مثل اینها دو حالت داره این مشخصه یا rtl یا ltr که اولی راست به چپ و دومی چپ به راست هست که بصورت پیشفرض قرار داره، البته زیاد کار تمیزی نیست اینکار و بعدا فارسی سازی رو با CSS ایشالله کار می کنیم روش حالا کدمون راست چین شده و میشه:

خوب دو تا تگ دیگرو معرفی کنیم و این جلسه رو تموم کنیم اولیش تگ center هست برای اینه که یه عکس یا متن رو به وسط صفحه بیارید و نیازمند تگ پایانی نیز هست مثلا فرض کنید عکسمون و نوشتمون رو می خوایم بیاریم وسط صفحه :

تگ بعدی که واسه زیباسازی به کار میره تگ marquee هست و یه متن یا عکس متحرک رو به وجد ویاره و نیازمند تگ پایانی هست اول بیاید با مشخصه های این تگ آشنا شیم:

1-سرعت حرکت متن: با مشخصه scrollamount می تونید سرعت حرکتش رو تعیین کنید

2-جهت حرکت : با مشخصه direction می تونید این کارو کنید که چهار حالت داره right - left -up-down

3-سایز که معلوم می کنه تو چه بازه ای کار کنه با مشخصه width می تونید سایز در عرض و height ارتفاعش رو تعیین کنید برای تعیین این دو مشخصه دو راه هست یا اینکه بنویسید = 500 مثلا که منظور 500 پیکسل هست یا بگید مثلا = 50% که یعنی بازه ی کاریش 50 درصد صفحه باشه به این کد توجه کنید متوجه میشید:

ممنون از توجهتون...

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

دیدگاه ها 38 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    Sina Lavigne2009(۳ مرداد ۱۳۹۱)

    سلام.خیلی ممنون از این آموزش های خوبتون.من تا حالا خیلی e-book برای همین html دانلود کردم ولی همشون یه دفعه میان یه بحث هایی و شروع می کنن که هیچ سر در نمیاره.خوبیه کاره شما اینه که پله پله یه مطلبی و توضیح می دین.اینجوری به هیچ مشکلی نمی خوریم.
    تشکر از مطالب عالیتون.

  • ‏‏

    سلام. یعنی این کدهارو میشه بجای قالب واسهپرشین بلاگ استفاده کرد؟

    • ‏‏
      محمدسینا معراجیان(۴ شهریور ۱۳۹۱)

      بله فرقی نداره برای اون هم میتونید استفاده کنید

      • ‏‏

        مطمئنی؟؟؟؟ پس بعضی قسمتاش مثل لینک دوستان و این چیزا چطوری میاد؟؟؟؟

        • ‏‏
          محمدسینا معراجیان(۱۱ شهریور ۱۳۹۱)

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

  • ‏‏
    سید مهدی(۲۳ فروردین ۱۳۹۲)

    با سلام : آقا دمتون گرم ایول. حال کردیم مخلصتیم.!
    ایشالله صفحه ای که دارم می سازم تموم شد بهتون نشونش می دم.
    من واقعا مدیون شمام 😳 😳 😳

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram