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

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



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

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

22417 ۹ تیر ۹۱

خوب چون قول داده بودم که آموزش رو از صفر شروع کنم ممکنه یه سری حوصلشون سر بره اشکالی نداره من سریع سعی می کنم بنویسم تا اونایی که یه چیزایی بلدن هم استفاده کنن درضمن توصیه می کنم همه کامل بخونن ممکنه یه سری نکات ریز رو ندونن بعد بعدا که ازش استفاده می کنم نفهمن چی می گم.
خوب قبل از شروع برنامه نویسی باید بفهمیم تگ چیه؟
هر زبانی قواعد خودش رو برای حرف زدن داره به زبان عامیانه اگر بخوام بگم اون کلماتی که تو زبان برنامه نویسی استفاده میشه رو تگ می گن بهش
خوب حالا می خوایم با زبان HTML وبرخی از تگ های اون و کاربرد هاش آشنا بشیم
قبل از اون بگم که به نظر من خوبه که از نرم افزار notepad++ برای برنامه نویسی تحت وب استفاده کنین چون هم عالیه هم کم حجم


*نکته : برای اینکه به برنامه بفهمونیم حرفمون کی تموم میشه باید تا یه جایی حرفمون رو بزنیم بعد بهش بگیم خوب الآن حرفم تموم شد!واسه همین تقریبا همه ی دستورها یه تگ آغازین دارن و یه تگ پایانی!اگر گیج شدین اشکالی نداره بیاین جلو متوجه می شین
زبان HTML با تگ شروع میشه و با تگ تموم میشه کلا کافیه قبل از حرف اول هر تگ / اضافه کنیم تا اون تگ به یه تگ پایانی تبدیل بشه.سعی کنید هرچیزی که میگم رو از همین الآن توی نرم افزار کدزنیتون حالا چه اینی که من گفتمه یا چه نوت پد خود ویندوزه یا هرچیزه دیگه ای بزنید و تست کنید یعنی تا اینجای کار برناممون شده:

خوب حالا برنامتون رو سیو کنید با اسم index.html همونطور که میبینید یه فایل با همین اسم ساخته می شه که اگه روش کلیک کنید تو مرورگرتون باز میشه حالا توی صفحتون چی میبینید؟هیچی!چرا؟چون ما صرفا به مرورگر فهموندیم می خوایم به زبان HTML باهاش حرف بزنیم اما هنوز حرفی نزدیم که نشونمون بده!یک برنامه به زبان HTML از دو بخش تشکیل شده بخش HEAD و بخش BODY

-بخش HEAD جایگاه اسم صفحه ، کلیدواژه ها و امثال اینهاست

-بخش BODY هم همونطور که از اسمش پیداست بخش بدنه ی سایته و قالب در اینجا شکل میگیره

خوب بخش HEAD و BODY هم مثل تگ اولمون با اسم خودشون شروع می شن و با تگ پایانیشون تموم میشن!

*نکته : تگ HEAD قبل از تگ BODY قرار می گیره حالا اگه برناممون رو ادامه بدیم اینطوری میشه

خوب اگه ببینید اسم صفحمون الآن آدرس فایلمونه فرض کنید الآن می خوایم اسم صفحمون رو به "اولین برنامه ی من" تغییر بدیم،همونطور که گفتم نام صفحه از مواردیه که توی بخش HEAD قرار می گیره برای اینکا از تگ TITLE استفاده می کنیم یعنی الآن کدمون میشه:

حالا اگه سیو کنید و صفحتون رو باز کنید میبینید که احتمالا اسم صفحه عوض شده ولی یکسری حروف مثل حروف چینی داره نمایش داده میشه این ایراد از انکودینگ هست برای رفع اون اگر از نوت پد دیفالت استفاده می کنید هنگام سیو زیر جایی که اسم فایل رو می نویسید انکودین رو به UTF8 تغییر بدید و اگر از نوت پد ++ استفاده می کنید از تب های بالا روی تب پنجم انکودینگ Encoding کلیک کنید و UTF8 روانتخاب کنید.

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

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

حالا اگه صفحتون رو ببینیدبکگراند صفحتون همین شده فقط با یه مشکل اینکه بکگراند در کل صفحه تکرار شده که برای بعضی از بکگراندها لازمه اما برای بکگراند ما نه اینجا به یکی دیگه از توضیحات تگ BODY می رسیم و اون استایل هست استایل نحوه قرارگیری اشیاء رو اصولا بیان می کنه که کار زبان CSS هست که در آینده راجع بهش توضیح خواهیم داد.این توضیحات استایل برای بکگراند سه حالت داره:

*نکته : اگر هیچ کدوم رو انتخاب نکنید و درکل استایلی تعریف نکنید بصورت عادی هم در طول و هم در عرض عکستون تکرار میشه

یعنی کدی که می می خوایم الآن میشه این که فقط در محور x ها تکرار بشه:

حالا اگه نگاه کنید پس زمینه مون درست شده و فقط یه مشکلی مونده اونم رنگ صفحه هست که سفیده اینجا باید از توضیحات سوم تگ BODY استفاده کنیم که BGCOLOR هست و رنگ صفحه رو مشخص می کنه شما می تونید دو جور رنگ بدید یا مثلا بنویسید bgcolor="blue" مثلا یا مث کد زیر که کد نهاییمون هست کد هگز رنگ رو بدید
کد نهایی این جلسه:

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

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

  • ‏‏

    salam.

    ziade ziade ziade kheyli kheyli mamnun 😀 man asheghe inam ke yad begiram chetori mitunam baraye webe khodam ghaleb besazam 😀
    bazam mamnun havartaaaaaaaaaaaaaaa 😳

    • ‏‏
      محمدسینا معراجیان(۱۸ تیر ۱۳۹۱)

      اموزش های بعدی رو بخونید

  • ‏‏

    دستتون درد نکنه!!!!!!!! 😆

  • ‏‏

    ببخشید میشه کمکم کنید که این کد رو اصلاح کنم؟نمیخوام عکس زمینش تکرار بشه اما میشه

    • ‏‏
      لقمان آوند(۲۶ مرداد ۱۳۹۱)

      این کد رو استفاده کنید :

      • ‏‏

        با تشکر….یه سوال دیگه پس چرا عکسم وسط تیبل قرار نمیگیره؟ در ضمن میخوام یه مقداری با حاشیه ی بالائی تیبل فاطله داشته باشه 😳 😳 😳 😳 😳 😳 ❓ 😳

        • ‏‏
          لقمان آوند(۲۷ مرداد ۱۳۹۱)

          عکس رو درون یه تگ بزار و ویژگی Text-align اون تگ رو center کن . برای فاصله دادن هم از ویژگی css ی به نام margin استفاده می کنن .

  • ‏‏

    هر جائیش که مشکل داره لطفا بگید ممنون میشم

  • ‏‏

    سلام ممنون بابت راهنماییتون…ببخشید من هی سوال می پرسم آخه از شما نپرسم از کی بپرسم؟ببینید من میخوام که عکس داخل تیبل وسط صفحه قرار بگیره اما وقتی از خاصیت

    استفاده میکنم خود تیبل میاد وسط یا

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

    • ‏‏
      لقمان آوند(۲۸ مرداد ۱۳۹۱)

      کدتون رو برام بفرستید تا تغیرات رو توش اعمال کنم .

  • ‏‏

  • ‏‏
  • ‏‏

    مرسی بنظر من عالی بود،حرف نداشت 😳 😳 😳 😳

  • ‏‏

    ای خدااااااااااااا
    من خیلی فتوشاپ بلد نیستم . خیلی غصه خوردم نتونستم از آموزشهاتون بهره ای ببرم :sad:
    بازم ممنون

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram