آموزش طراحی قالب از صفر – جلسه چهارم تگ های html
گفته بودم امروز اگه ممکن باشه میریم آموزش فتوشاپ مرحله اولش رو بگیم که دیدم میشه امروز HTML رو تموم کرد گفتم بذارید اول تموم شه بعد بریم مباحث بعدی امروز با حدود ۱۰ تگ آشنا خواهیم شد.
از تگ فرم 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 شان بنویسید مانند کد بالا
خوب حالا بیاید چندتا چیز دیگه هم به فرممون اضافه کنیم
۱-لیست های کشویی : برای گذاشتن لیست های کشویی دیگر نیازی به تگ input نیست این لیست ها خود تگ متفاوتی دارند به اسم select و نیازمند تگ پایانی نیز می باشند
تگ داخلی select : برای ایجاد هر کشوی این لیست ها باید یک تگ option که فقط درون این تگ کار می کند بسازیم این تگ نیز نیازمند تگ پایانی است و هرچیزی که بین تگ آغازیو پایانی اش قرار گیرد داخل کشو نمایش داده می شود نگران نباشید با این مثال متوجه خواهید شد:
*نکته : همانور که گفتیم برای رفتن به خط بعدی از کد br استفاده می شود اما کد دیگری نیز وجود دارد که هم مارا به خط بعد میبرد و هم زیر خط قبلی یک خط می کشد ببینید :
اولین برنامه ی من
خوب تگ آخری که در فرم ها نیاز با دانستنش هستیم تگ textarea هست که باکسی برای نوشتن به وجو میاورد حتما میگید خوب پس مشخصه text تگ input چه فرقی با این داره؟خوب از اولی اصولا برای نوشتن نام کاربری و پسورد استفاده می شه اما از این اصولا برای نوشتن پیغام زیرا قابلیت بزرگ شدن رو هم داره این تگ هم نیازمند تگ پایانی است ببینیم:
اولین برنامه ی من
*نکته : اگر دقت کنید در سمت چپ و پایین باکس ایجاد شده چند نقطه وجود دارد که با گرفتن آنها و کشیدن آنها بازدیدکننده می تواند سایز آنرا تغییر دهد.
خوب از فرم ها خارج میشیم و به توضیح شمارنده ها دو نوع شمارنده داریم شمارنده با ترتیب و شمارنده بی ترتیب که کارکردشون مثل هم هست و فقط تگشون فرق داره اول به معرفی شمارنده بی ترتیب می پردازیم این شمارنده ها با تگ ul نشون داده میشن و نیازمند تگ پایانی نیز هستند این تگ نیازمند یک تگ داخلی هست که li نام داره و نیازمند تگ پایانی نیز هست حالا متوجه نشدید این شمارنده ها چین؟اشکالی نداره تو این مثال می فهمید اگر کدی مثل کد زیر داشته باشیم:
اولین برنامه ی من
می بینید که نوشته های داخل li با یک نقطه و درخط های مجزا چاپ شده اند استفاده از این تگ در نوشتن موارد یک چیز یا منوها هست که بعدا خواهیم دید حالا فرق شمارنده باترتیب با این چیه؟فقط به جای نقطه عدد گذاشته میشه یعنی اولی ۱ دومی ۲ و … تگ آن هم به جای ul کافیه ol بذارید حتی تگ داخلیشون هم فرقی نداره.
می مونه دو نوع کد که اولیش table هست و نقش مهمی در ساختمان وب ها داره و خوب از اسمش معلومه یه جدول رسم می کنه تگ table نیازمند تگ پایانی نیز هست و دو تگ داخلی داره:
۱-تگ tr : از این تگ برای رسم یک سطر در جدول استفاده می شه
۲-تگ td : از این تگ هم برای رسیم یک ستون استفاده میشه
خوب چهارتا مشخصه مهم داره table که اولی border هست دقیقا همون کار مشخصه border عکس رو می کنه یعنی می گه چقدر حاشیه داشته باشه جدول که حالت عادیش هم ۰ هست
دومی background یا عکس پشت زمینه جدول هست
سومی و چهارمی هم width و heigh هستند که همونطوری که درانتهای جلسه قبل گفتیم برای اندازه هستند و به همون دو روش نیز استفاده میشن.
بیاید یه جدول ۳ در ۲ رسم کنیم با هم:
اولین برنامه ی من اولی | دومی |
سومی | چهارمی |
پنجمی | ششمی |
خوب فکر کنم خیلی ساده و واضح بود فقط یه نکته ای اینکه از تگ هایی مثل تگ فونت برای کل table نمی تونید استفاده کنید و باید جدا برای هر td تعریف کنید.نکته ی مهم بعدی اینه که حواستون باشه tr به td اولویت داره یعنی اول باید یه سزر ایجاد کنید بعد یه ستون.
حالا که بحث به اولویت رسید یه توضیحی راجع به برنامه نوشتن بدم اینکه حتما اولویت رو رعایت کنید مثلا اگه یه تگی رو قبل از همه ی تگ ها باز کردید باید اونو بعد از همه ی اونا ببنید و برعکس مثلا این کد زیر غلطه:
اولین برنامه ی من
چون که تگ Body قبل از تگ center باز شده اما بعد از اون بسته نشده که این غلطه البته شاید ببینید مشکلی تو نتیجش پیش نمیاد این واسه اینه که فعلا کدمون خیلی سادس و قاطی نمیشن کد ها با هم اما وقتی یکم پیچیده بشه حتما مشل آفرین خواهد شد.
تگ آخری که می خوام آموزش بدم باز هم برای زیبایی وبتون هست و blink نام داره که نیازمند تگ پایانی نیزهست و کارش اینهکه عکس یا نوشته ای که بین تگش میذارین رو مدام خاموش و روشن می کنه مانند کد زیر
اولین برنامه ی من
توصیه ی من اینه که زیاد از این تگ استفاده نکنید چون باعث چشم درد بازدیدکننده میشه
خوب فکر می کنم زبان HTML رو تا یه حد خوبی باهم یادگرفتیم و برای فعلا بسه انشالله دیگه فردا جلسه ی اول فتوشاپ و طرای عناصر وب رو میذاریم و از پس فردا زبان CSS و شروع می کنیم.
امیدوارم بیشتر از اینها مارو دنبال کنید
ممنون
www.7learn.com