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

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



  آیا می دانید تا کنون 6253 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

15958 ۱۱ تیر ۹۱

گفته بودم امروز اگه ممکن باشه میریم آموزش فتوشاپ مرحله اولش رو بگیم که دیدم میشه امروز HTML رو تموم کرد گفتم بذارید اول تموم شه بعد بریم مباحث بعدی امروز با حدود 10 تگ آشنا خواهیم شد.

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

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

*نکته : تگ input بیرون تگ فرم کاری را انجام نمی دهد

خوب تگ input چند مشخصه داره که مهمترینشون نوعش یا type هست(حول نشید با مثال متوجه میشید) برخی از این ها عبارتند از : text - password - button - submit - reset - checkbox - radio

یه توضیح کوتاه : مشخصه text یه تکست باکس درست می کنه مشخصه password هم یه تکست باکس درست می کنه با این فرق که هرچیزی توش بنویسین با * نشون داده میشه! تگ submit برای ایجاد یک دکمه فرستنده اطلاعات استفاده میشه تگ button برای ایجاد دکمه ای بدون ارسال اطلاعات به مکانی خارجی و تگ reset هم دکمه ای برای پاک کردن اطلاعات فرم ایجاد می کنه یه مثال:

*نکته : تگ input نیازمند تگ پایانی نیست:

خوب حالا اگر نتیجه کد رو ببینیم یک تکست باکس و دوتا دکمه ایجاد شده اند که روی یکی از دکمه ها واژه ی Reset نوشته شده و دیگری خالی هست همچنین تکست باکس نیز خالی از متن هست و یک چک باکس و یک دکمه ی رادیو نیز همینطور حالا یک چیزی توی تکست باکس بنویسید و روی دکمه ی Reset کلیک کنید!دیدید؟اطلاعات فرم پاک شد!حالا شاید واستون این سوال پیش بیاد که چطوری روی اون دکمه ی خالی یه چیزی بنویسیم یا چطوری یه مقدار اولیه ای برای تکست باکس تعیین کنیم؟اینجا می رسیم به مشخصه ی دوم تگ input به نام value یا مقدار اگر value رو برای دکمه تعریف کنید روی دکمه اون نوشته میشه و اگه روی تکست باکس بنویسید مقدار اولیه اش اون میشه برای مثال :

حالا می بینید که همون چیزی که می خواستیم شد

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

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

*نکته : دکمه های رادیو و چک باکس ها با تگ value تغییر ظاهری ای نمی کنند و اگر می خواهید توضیحی برای آنها بنویسید باید در کنار تگ input شان بنویسید مانند کد بالا

خوب حالا بیاید چندتا چیز دیگه هم به فرممون اضافه کنیم

1-لیست های کشویی : برای گذاشتن لیست های کشویی دیگر نیازی به تگ input نیست این لیست ها خود تگ متفاوتی دارند به اسم select و نیازمند تگ پایانی نیز می باشند

تگ داخلی select : برای ایجاد هر کشوی این لیست ها باید یک تگ option که فقط درون این تگ کار می کند بسازیم این تگ نیز نیازمند تگ پایانی است و هرچیزی که بین تگ آغازیو  پایانی اش قرار گیرد داخل کشو نمایش داده می شود نگران نباشید با این مثال متوجه خواهید شد:

*نکته : همانور که گفتیم برای رفتن به خط بعدی از کد br استفاده می شود اما کد دیگری نیز وجود دارد که هم مارا به خط بعد میبرد و هم زیر خط قبلی یک خط می کشد ببینید :

خوب تگ آخری که در فرم ها نیاز با دانستنش هستیم تگ textarea هست که باکسی برای نوشتن به وجو میاورد حتما میگید خوب پس مشخصه text تگ input چه فرقی با این داره؟خوب از اولی اصولا برای نوشتن نام کاربری و پسورد استفاده می شه اما از این اصولا برای نوشتن پیغام زیرا قابلیت بزرگ شدن رو هم داره این تگ هم نیازمند تگ پایانی است ببینیم:

*نکته : اگر دقت کنید در سمت چپ و پایین باکس ایجاد شده چند نقطه وجود دارد که با گرفتن آنها و کشیدن آنها بازدیدکننده می تواند سایز آنرا تغییر دهد.

خوب از فرم ها خارج میشیم و به توضیح شمارنده ها دو نوع شمارنده داریم شمارنده با ترتیب و شمارنده بی ترتیب که کارکردشون مثل هم هست و فقط تگشون فرق داره اول به معرفی شمارنده بی ترتیب می پردازیم این شمارنده ها با تگ ul نشون داده میشن و نیازمند تگ پایانی نیز هستند این تگ نیازمند یک تگ داخلی هست که li نام داره و نیازمند تگ پایانی نیز هست حالا متوجه نشدید این شمارنده ها چین؟اشکالی نداره تو این مثال می فهمید اگر کدی مثل کد زیر داشته باشیم:

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

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

1-تگ tr : از این تگ برای رسم یک سطر در جدول استفاده می شه

2-تگ td : از این تگ هم برای رسیم یک ستون استفاده میشه

خوب چهارتا مشخصه مهم داره table که اولی border هست دقیقا همون کار مشخصه border عکس رو می کنه یعنی می گه چقدر حاشیه داشته باشه جدول که حالت عادیش هم 0 هست

دومی background یا عکس پشت زمینه جدول هست

سومی و چهارمی هم width و heigh هستند که همونطوری که درانتهای جلسه قبل گفتیم برای اندازه هستند و به همون دو روش نیز استفاده میشن.

بیاید یه جدول 3 در 2 رسم کنیم با هم:

خوب فکر کنم خیلی ساده و واضح بود فقط یه نکته ای اینکه از تگ هایی مثل تگ فونت برای کل table نمی تونید استفاده کنید و باید جدا برای هر td تعریف کنید.نکته ی مهم بعدی اینه که حواستون باشه tr به td اولویت داره یعنی اول باید یه سزر ایجاد کنید بعد یه ستون.

حالا که بحث به اولویت رسید یه توضیحی راجع به برنامه نوشتن بدم اینکه حتما اولویت رو رعایت کنید مثلا اگه یه تگی رو قبل از همه ی تگ ها باز کردید باید اونو بعد از همه ی اونا ببنید و برعکس مثلا این کد زیر غلطه:

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

تگ آخری که می خوام آموزش بدم باز هم برای زیبایی وبتون هست و blink نام داره که نیازمند تگ پایانی نیزهست و کارش اینهکه عکس یا نوشته ای که بین تگش میذارین رو مدام خاموش و روشن می کنه مانند کد زیر

توصیه ی من اینه که زیاد از این تگ استفاده نکنید چون باعث چشم درد بازدیدکننده میشه

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

امیدوارم بیشتر از اینها مارو دنبال کنید

ممنون

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

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

  • ‏‏

    چرا blink کار نمیکنه؟؟؟؟؟

  • ‏‏

    سلام آقا سینا دستت درد نکنه واقعا عالی بود .در ضمن از وقتیکه اون نظر توهین آمیز به شما توی سایتتون درج شده پسر 8ساله من خیلی عصبانی شده چون فکر میکنه به شعور بچه ها توهین شده و با جدیت بیشتری آموزش زبان انگلیسی رو شروع کرده تا به امثال اون آدم بگه با سنین پائین تر هم میشه برنامه نویس شد چون اون فعلا بعضی کارهارو توی دلفی و سی شارپ بلده فقط کد نویسی رو بلد نیست که به مرور انشاالله یاد می گیره.امیدوارم همه بچه های این مرزوبوم دانشمند بشن نه صرفا یک وبگرد ول معطل .با امید موفقیت روز افزون شما

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

      خیلی خیلی از اینجور مراجعه کننده های باشعور این وبسایت متشکرم که اینقدر لطف دارن

  • ‏‏
    Masoudpsp(۷ مهر ۱۳۹۱)

    دمت گرم خیلی گلی داداش با این آموزش هات

  • ‏‏
    hajihasani(۷ دی ۱۳۹۱)

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

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

      حتما قصد دارم بکنم اینکارو

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram