نظرسنجی: آیا این مبحث به درد بخور هست یا نه؟
بله
خیر
[نمایش نتایج]
 
توجه: این یک نظرسنجی عمومی است و سایر کاربران می‌توانند رای شما را ببینند.
رتبه موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش HTML + CSS برای طراحی سایت
#1
سلام
توی این تاپیک قصد دارم آموزش HTML (اچ تی ام ال) و CSS (سی اس اس) رو قرار بدم که جز پایه ای ترین مسائل طراحی وب هستش. (هر چند با تکنولوژی های جدید از این مباحث در طراحی ظاهر برنامه های ویندوزی و موبایلی هم میشه استفاده کرد 1402294310 ).
همینطور اگه دوستان سوالی راجع به این موضوع داشتن اینجا مطرح کنن تا اگه من و یا باقی دوستان بتونیم بهشون کمک کنیم و راهنمایی لازم رو انجام بدیم.

**********************************************

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

نرم افزار NotePad++ که یک نرم افزار کم حجمه و از NotePad ویندوز بهتره رو میتونید از زیر دانلود کنید.

دانلود با حجم 7.89 مگابایت

نرم افزار حرفه ای تر دیگه Adobe DreamWeaver هستش که خیلی خوبه خودش میتونه کدهاتون رو تکمیل کنه یعنی
شما اول کد رو مینویسید خودش یه لیست در اختیارتون قرار میده که میتونید سریع کدتون رو تکمیل کنید
محیط بهتری دار شما میتونید همونجا که کدتون رو مینویسید ببیند که در ظاهر چه اتفاقی میوفته
میتونید از بخشهای که داره برای درج سریع کدها و ظاهر سایتتون استفاده کنید و کلی امکانات دیگه که اگه از این مباحث استقبال بشه به اون ها هم میپردازیم و با کمک این نرم افزار میتونیم راحتر با اون مباحث هم کار کنیم
ولی یکم حجمش زیاده

از اینجا میتونید دانلود کنید با حجم 344 مگ نرمافزار + 160 مگ آپدیت
آموزش نصبش هم همونجا توضیح داده ولی اگه مشکلی داشتید بپرسید تا راهنمایی کنم

**********************************************

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

**********************************************

مطالب رو همه رو در پست اول و دوم و سوم نگه میدارم تا به هم ریخته نباشن.

**********************************************
جلسه اول

HTML یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاریه که نام کامل آن Hyper Text Markup Language میباشد. به زبان ساده این زبان برای نحوه ی چینش اسناد تحت وب (همون نحوه ی چینش اطلاعات و هر چیزی که توی مرورگر میبینید) میباشد.
CSS هم برای نحوی قالب بندی تگهای HTML مورد استفاده قرار میگیره.
CSS از نام Cascading Style Sheets گرفته شده به معنای شیوه نامه ی آبشاری.
به زبان ساده شما اطلاعات و چهار چوب بندی رو با استفاده از HTML انجام میدین و با استفاده از CSS خوشگلاسیونش میکنید.
فایلهای HTML رو با پسوند *.html یا *.htm و فایلهای CSS رو با پسوند *.css ذخیره میکنیم.
برای مثال : index.html یا index.htm و style.css
کلمه ی index یک کلمه تعریف شده برای مرورگر هست یعنی اگه داخل یک فولدر n تا فایل html هم باشه میگرده دنبال فایلی با نام index و اون رو اول نمایش میده. در واقع اولین صفحه یا همون صفحه ی اصلی رو با نام index ذخیره میکنن.
زبان HTML توی این همه سالی که وب به وجود اومده توسعه زیادی پیدا کرده و الان رسیده به نسخه ی 5 . توی نسخه های اولیه اصلا CSS وجود نداشته و باید با همون HTML ظاهر کارو هم طراحی میکردن که خیلی ابتدایی بوده اما الان با استفاده از CSS که به نسخه 3 رسیده کلی ظاهر کارو میشه قشنگ کرد. نمونش رو تو اینترنت زیاد دیدین تا الان.
هر کدوم از این نسخه های HTML تعریف خاصی دارن که در ابتدا سند html نوشته میشه البته اونقدر هم مهم نیست نوشتن یا ننوشتنش اما بعضی از تگ ها با استفاده از این تعریف توسط مرورگر تفسیر میشن که بهتره این تعریف رو در ابتدای سند قرار بدین. اگه از IDE یا همون محیط کد نویسی Adobe Dreamweaver استفاده کنید خودش این تعاریف رو مینویسه. اما ما فقط از تعرف HTML5 استفاده میکنیم چون هم جدیدتره هم کوتاه تر.
این تعریف به صورت زیر در اول فایل HTML نوشته میشه :



کد:
<!doctype html>


همونطور که گفتم html یه زبان نشانه گذاری هستش که به این نشانه ها تگ میگیم.
فایل HTML یک فایل درختیه یعنی یک تگ بیرونی به عنوان والد داره که تگ html هست.
این والد دو فرزند داره که تگهای head و body هستن.
تمام چیزی که ما تو مرورگر میبینیم داخل تگ body قرار داره.
تگ head یه جورایی برای تعاریف و درج کدهای خاص هست که بعدا بهش میرسیم.
هر تگ یه شروع و پایان داره.
مثل : <html>  برای شروع سند html و تگ <html/> برای پایان سند. تمام تگها مانند این تگ شروع و تموم میشن. مثلا تگ head رو با <head> شروع میکنیم و با <head/> تموم میکنیم.
بعضی تگها شروع و پایانشون یه جاست مثل تگ </ br> که برای رفتن به سطر بعد یا break هستش.
فعلا تا اینجا برای مطالعه بود از جلسه ی بعد شروع میکنیم به تمرین کردن و عملی پیش رفتن.

**********************************************
جلسه دوم

برای شروع ادیتور خودتون رو باز کنید.
اگه از notepad استفاده میکنید که هیچ کاری لازم نیست انجام بدین.
اگه از notepad++ استفاده میکنید از منوی Language گزینه ی H زبان HTML رو انتخاب کنید.
اگه از DreamWeaver استفاده میکنید از منوی File گزینه New رو انتخاب و بعد HTML رو انتخاب کنید. (به صورت پیشفرض روی HTML قرار داره.)

من از این به بعد با notepad++ کار میکنم که ابتدایی ترین حالت باشه.

خب همونطور که جلسه قبل گفتم باید اول سند HTML تعریف HTML5 رو بنویسیم.
[عکس: Capture1.PNG]
تگ بعدی تگ والد یا همون تگ HTML هستش که مثل شکل زیره
[عکس: Capture2.PNG]
بعد از اون داخل این تگ دو تگ وجود داره که یکی تگ head و اون یکی تگ body مثل شکل زیر
[عکس: Capture3.PNG]
همونطور که در عکس مشخصه تگ های داخلی رو با زدن کلید Tab در کیبورد جلوتر بردیم این کار هیچ تاثیر روی کد و نتیجه نداره اما به اصطلاح خوانایی کد رو بالا میبره و خاصیت درختی بودن تگ ها رو نشون میده.

معمولا داخل تگ head هستش که فایلهای اسکریپت و css رو معرفی میکنن با فایل اسکریپت فعلا کاری نداریم و در آینده اونها رو توضیح میدم.
داخل تگ head تگی وجود داره به اسم title که کار این تگ نشان دادن یک متن در سربرگ مرورگره. برای اینکه بهتر متوجه بشین این تگ رو داخل تگ head تعریف میکنیم و یه متن دلبخواه داخل تگ مینویسیم مثل شکل زیر.
[عکس: Capture4.PNG]
حالا کافیه این فایل رو به اسم index.html هر جا که دوست دارین ذخیره کنید و اونو اجرا کنید و نتیجه رو مشاهده کنید.
[عکس: Capture5.PNG]
HTML تگ های زیادی داره که معرفی کردن همشون زمان بره اما مهمترین تگها به صورت زیر میباشند.

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

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

تگهای بعدی h1 , h2 , h3 , h4 , h5 , h6 هستن این تگها متن یا سربرگ (هدر) رو نشون میده که عدد بعد h نشون دهنده ی ضخامت متن هستش که هرچه کمتر میشه متن کوچیکتر میشه.

تگ span : برای نشون دادن متن.

تگ p : برای نشون دادن پاراگراف.

تگ br : برای رفتن به سطر بعد.

تگ b : برای bold کردن متن. دیگه مورد استفاده قرار نمیگیره چون با CSS میشه این کارو کرد.

HTML5 تگهای جدیدی رو معرفی کرده که بعدا بهشون اشاره میکنیم فعلا با همین تگ ها میتونیم کارو شروع کنیم.

تمام این تگها داخل تگ body قرار میگیرن.

مثل شکل زیر و نتیجش :
[عکس: Capture7.PNG][عکس: Capture6.PNG]
فعلا با این تگها کلنجار برین تا به CSS برسیم و به اینا استایل بدیم.
ناگفته نمونه که همه ی سایتها نهایتا به این فایل HTML میرسن با کلی پیچیدگی و تو در تویی کافیه توی مرورگر که در حال نمایش یه سایتی هستش کلیدهای Ctrl + U رو بزنید تا بتونید کدهای HTML اون سایتو ببینید.
تا جلسه بعد بدرود.

**********************************************
جلسه سوم

یکی دیگر از تگهای مهم تگ img است. به کمک این تگ میتوان عکس در فایل HTML نشان داد.

خاصیتها یا Attributes :
تگهای HTML شامل خاصیت هم میشن به کمک این خاصیتها میشه کارهای مختلفی انجام داد. مثلا برای تگ img یک خاصیت ضروری src هست که آدرس عکس رو مشخص میکنه بدون این خاصیت تگ img هیچی نشون نمیده.

تگ hr : با استفاده از این تگ میتونید یک خط افقی ایجاد کنید.

مانند تصویر زیر :

[عکس: Capture8.PNG]

[عکس: Capture9.PNG]

همونطور که میبینید خاصیتهای دیگه ای هم برای img و دیگر تگها موجوده.

خاصیت width برای طول و خاصیت height برای عرض هستند.
خاصیت alt برای زمانیه که آدرس عکس اشتباه باشه و یا به هر دلیلی عکس رو نشون نده در اون زمان نوشته درون alt رو به جای عکس نشون میده.

از مهمترین خاصیت های دیگه عبارتند از :

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

class : این خاصیت برای زمانی مناسبه که شما میخواین از css استفاده کنید مثلا میخواین داخل سایتتون دو دسته دکمه آبی و قرمز داشته باشین اون موقع کلاس دکمه های آبی رو مثلا میزارین btnBlue و کلاس دکمه های قرمز رو میزارین btnRed و داخل css تنظیمشون میکنید. بعدا در بخش css راجع بهش بیشتر توضیح میدم.

title : این خاصیت باعث میشه که وقتی نشانگر موس رو روی تگ ببرید متن داخل title روی نشانگر نمایش پیدا کنه.(این با تگ title فرق میکنه اون یک تگه این یه خاصیته). مثل عکس زیر :

[عکس: Capture10.PNG]
[عکس: Capture11.png]

href : این خاصیت هم برای تگ a (همون لینک) ضروریه داخل این تگ هم آدرس لینک یا صفحه یا سایت قرار میگیره که قرار با کلیک بر روی لینک به اونجا منتقل بشه مثل زیر :

[عکس: Capture12.PNG]
[عکس: Capture13.png]

src : برای مشخص کردن ادرس عکس.

خاصیت style : با استفاده از این خاصیت میتونید به صورت مستقیم و در کد HTML به تگ استایل css ی بدین. بعدا راجع بهش توضیح میدم.

تگهای مهم دیگه در HTML تگهای form و input هستند.

تگ form : همونطور که از اسمش پیداست برای ایجاد یک فرم هستش این تگ خاصیت مهم action  و method رو داره. خاصیت action برای ادرس جاییه که قرار فرم ارسال بشه (فعلا چون ما داریم روی HTML کار میکنیم کاری بهش نداریم) اگه این خاصیت رو خالی بزارین فرم به خود صفحه ارسال میشه یعنی به خودش ارسال میکنه.

خاصیت method هم برای نوع ارسال هستش که دو نوع مهم get و post داره که get برای اطلاعات بی اهمیت مثل جستجو در سایت و post هم برای اطلاعات مهم مثل یوزرنیم و پسورد استفاده میشه.(فعلا به این هم کاری نداریم)

تگ input : این تگ هم برای گرفتن ورودی از کاربر هستش. این تگ خاصیت مهمی به اسم type داره که موارد مختلفی میپذیره مثل button برای دکمه و text برای گرفتن متن و ... .
خاصیت دیگه value هست برای تگ input که به کمک این خاصیت میشه مقدار تگ input رو مشخص کرد.

یک تگ دیگه به اسم textarea وجود داره که برای گرفتن متنهای طولانی استفاده میشه. مثل همین بخش نوشتن کامنت در محتا که textarea هستش.

تگ label هم برای نوشتن متن به کار میره.

مثال کاملش در عکس زیر هست.

[عکس: Capture14.PNG]
[عکس: Capture15.PNG]

خاصیت dir برای تگ body : که دو مقدار ltr و rtl هستش که به معنی راست چین و چپ چین بودنه. که چون ما فارسی مینویسیم این رو بر روی rtl قرار میدیم.

یه سری نکات در عکس بالا وجود داره مثل اینکه value رادیو ها نشون داده نمیشن در واقع هنگام ارسال فرم به کار میاد که فرد men رو انتخاب کرده یا women 
همینطور خاصیت name هر دو به یک اسم هستش، که اگه به یک اسم نباشه، میشه هر دو رو انتخاب کرد اما وقتی به یک اسم هستن فقط یکی رو میشه انتخاب کرد.

تفاوت type در دکمه ها : وقتی تگ فرم وجود داشته باشه با زدن دکمه submit کل اطلاعات فرم رو به آدرس action ارسال میکنه اما دکمه button اینطور نیست و برای ارسال اطلاعات باید براش با اسکریپت کد نوشته بشه که در آینده به اون مباحث هم میرسیم.

خب تا جلسه بعد با اینا کار کنید تا دستتون بیاد (اگه با dreamweaver کد بنویسید خیلی تو اینا کمکتون میکنه تا بتونید حالتهای مختلف رو تست کنید.)

فعلا 

**********************************************
جلسه چهارم

CSS مخفف کلمه Cascading Style Sheets به معنی الگوهای آبشاری
با CSS میشه به Html هامون استایل بدیم
فایلهای css رو با پسوند *.css ذخیره میکنیم
style ها به ترتیب زیر اعمال میشن:
اول استایلهای داخل فایل css 
بعد استایلهای که داخل صفحه html ودر head تعریف میشن
و در آخر استایلهای که روی خود تگ تعریف میشن اعمال میشن.
بنابراین اولویت اجرا از آخر به اول لیست بالاست یعنی استایلی که روی تگ تعریف میشه از استایلی که در head صفحه تعریف میشه اولویت بیشتری داره
همینطور استایلی که در head تعریف میشه از استایلی که در فایل css تعریف میشه اولویت بیشتری داره. (اینو با تمرین بهش میرسین کم کم)

خب حالا ما یک فایل با پسوند css داریم و یک فایل با پسوند html چطوری اینارو به هم مرتبط کنیم؟؟
برای این کار فایل css رو کنار فایل html  قرار میدیم و بعد با استفاده از تگ link اونو به html مون متصل میکنیم (تگ link در head صفحه تعریف میشه) مثل زیر :
[عکس: Capture5.PNG]
حالت دوم اینه که داخل خود صفحمون مستقیم استایلمونو بنویسیم اینطوری فقط 1 فایل html رو داریم برای اینکار تگ style وجود داره. مثل زیر :
[عکس: Capture6.PNG]
البته تگ style رو میشه داخل تگ body هم بنویسیم.

حال سوم هم میشه روی خود تگ، استایل رو بنویسیم برای اینکار از خاصیت style استفاده میکنیم مثل زیر :
[عکس: Capture7.PNG]
خب برای اینکه به تگ های html استایل بدیم سه روش وجود داره
روش اول اینه که اسم تگ رو در استایل صدا بزنیم و استایل رو بهش بدیم که با این کار تمام تگهای صفحمون اون استایل رو میگیرن. مثل زیر :
[عکس: Capture0.PNG]
با این تعریف تمام تگ های div صفحمون نوشتهاشون به رنگ قرمز درمیاد.
روش دوم تعریف یک کلاس و تخصیص این کلاس به تگهای صفحمونه. برای تعریف تگ از . استفاده میشه و نام کلاس هم هر اسمی که دوست دارین که اصولا یک اسم مرتبط میزارن. مثل زیر:
[عکس: Capture1.PNG]
خب حالا ما کلاس red-color رو داریم و میتونیم به یه سری از تگهامون که میخوایم رنگ نوشته قرمز داشته باشن تخصیص بدیم برای این کار تمام تگهای html ما خاصیتی به اسم class دارن که میتونیم اینکارو بکنیم مثل زیر : 
[عکس: Capture2.PNG]
روش سوم هم استفاده از id تگ هامون هست که با علامت # شروع و بعدش id تگمون رو مینویسیم مثل زیر :
[عکس: Capture3.PNG]

[عکس: Capture4.PNG]
فعلا تا اینجا تا بعد به خاصیتهای زیاد css برسیم.
 There's no way I could describe him
What I've Said is just What I'm hoping for
But I Will Find Him
پاسخ }
#2
رزرو شده پست دوم.
 There's no way I could describe him
What I've Said is just What I'm hoping for
But I Will Find Him
پاسخ }
سپاس شده توسط: حنانه ، Delsaa ، علیرضا ، THE MAN
#3
رزرو شده پست سوم.
 There's no way I could describe him
What I've Said is just What I'm hoping for
But I Will Find Him
پاسخ }
سپاس شده توسط: حنانه ، Delsaa ، علیرضا ، THE MAN
#4
رزرو شده پست چهارم.
 There's no way I could describe him
What I've Said is just What I'm hoping for
But I Will Find Him
پاسخ }
سپاس شده توسط: حنانه ، Delsaa ، علیرضا ، THE MAN
#5
مرلین جان برای کد نویسی sublime که خیلی بهتره
پاسخ }
سپاس شده توسط: Delsaa ، علیرضا ، merlin_bozorg ، THE MAN ، حنانه ، HappyRobot
#6
اره بالا هم گفتم ادیتور های زیادی وجود داره که من دو نمونه کم حجم و حجیم رو معرفی کردم.
اگه ادیتوری مد نظرتونه معرفی کنید و لینکشو هم قرار بدین ممنون.
 There's no way I could describe him
What I've Said is just What I'm hoping for
But I Will Find Him
پاسخ }
سپاس شده توسط: علیرضا ، THE MAN ، حنانه ، Delsaa
#7
با تبلت هم میشه کار کرد؟
پاسخ }
سپاس شده توسط: علیرضا ، Delsaa ، merlin_bozorg ، THE MAN
#8
نقل قول:
با تبلت هم میشه کار کرد؟


آره میشه اما ادیتور مناسبی نمیشناسم برای تبلتها و گوشی های موبایل باید سرچ کنید و یه خوبشو پیدا کنید.

اگه تبلت اندرویدی دارین من این app هارو پیدا کردم براتون :
WebMaster’s HTML Editor Lite   پسورد : www.androidha.com
DroidEdit Pro
 There's no way I could describe him
What I've Said is just What I'm hoping for
But I Will Find Him
پاسخ }
سپاس شده توسط: Delsaa ، حنانه ، علیرضا ، THE MAN ، HappyRobot
#9
پست اول با جلسه ی دوم به روز شد.
 There's no way I could describe him
What I've Said is just What I'm hoping for
But I Will Find Him
پاسخ }
سپاس شده توسط: علیرضا ، حنانه ، THE MAN
#10
پست اول با جلسه سوم به روز شد.

 پ.ن : لطفا اگه سوالی داشتید توی تاپیک بپرسید و یا اصلا بگید که ادامه بدم یا نه، چون احساس میکنم مطالب جذابیتی نداره برای بچه؛ با توجه به موضوعیت انجمن.
 There's no way I could describe him
What I've Said is just What I'm hoping for
But I Will Find Him
پاسخ }
سپاس شده توسط: THE MAN ، علیرضا ، حنانه


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  9 نکته ضروری سئو برای کسب رتبه بهتر در گوگل samaabdi 0 115 09-21-2019، 01:03 PM
آخرین ارسال: samaabdi
  طراحی سایت mahsa63 12 4,785 07-17-2019، 10:12 PM
آخرین ارسال: jinse2000
Tongue ماسک برای پوست فاطمیا 2 323 09-26-2018، 08:18 PM
آخرین ارسال: فاطمیا
  سئو برای شرکت های بزرگ و سازمانی amir77 4 781 01-14-2018، 03:02 AM
آخرین ارسال: Davood_T
  آموزش نقاشی دیجیتال بدون هیچ امکانات خاصی تو موبایل ZeroSparda 16 1,438 09-29-2017، 03:36 AM
آخرین ارسال: ZeroSparda
  آموزش فتوشاپ حرفه ای ایمان 10 3,584 08-30-2017، 01:28 PM
آخرین ارسال: amir77
Music آموزش تئوری موسیقی و سازشناسی dona.sue 32 15,771 11-30-2016، 12:19 AM
آخرین ارسال: فردین
  آموزش اندروید amirali100 167 19,919 10-02-2016، 11:28 PM
آخرین ارسال: Mahsa-B
  پیشنهاد برای کمک به همه adrian 11 6 1,802 09-07-2016، 08:12 AM
آخرین ارسال: HappyRobot
  آموزش برنامه نویسی اندروید meena 24 6,581 09-03-2016، 05:20 PM
آخرین ارسال: INCOGNITO

پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان