گام اول برای آموزش طراحی سایت

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

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

گام اول برای آموزش طراحی سایت

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

۱- زبان نشانه گذاری HTML 

ابتدا بگویم HTML مخفف Hyper Text Markup Language و به معنای “زبان نشانه‌گذاری ابرمتن” است. اگر بخواهیم بگیم HTML چه نقشی دارد باید گفت HTML سنگ بنای وب است. یعنی چارچوب یک صفحه وب توسط HTML مشخص می شود. HTML یک زبان رایانه‌ای که برای تدوین قالب و طراحی صفحات وب به کار برده می‌شود.

نکته ۱: HTML یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری است.

نکته ۲: نقطه آغاز یادگیری برنامه نویسی تحت وب، یادگیری زبان نشانه گذاری HTML است.

به دستورالعمل های زبان HTML، برچسب یا ،Tag می گویند که به وسیله آنها محتوای یک صفحه وب نشانه گذاری و نحوه نمایش آن صفحه برای مرورگرها توصیف می شود.

نحوه کار HTML :

برچسب های HTML توسط مرورگرهای وب درک و تفسیر می شوند و تک تک آن ها را از داخل سند HTML می خواند و بعد از خواندن، محتوای آن صفحه را رندر (نمایان سازی) میکند. در بالا هم گفتیم HTML زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری ابر متن است و معمولا برای ساختمند کردن اطلاعات و تفکیک اجزای یک نوشتار (مثل: تصاویر، عناوین، فهرست ها، بندها و جداول) به کار میرود.

توجه: برای درک بهتر HTML پیشنهاد میکنم مقاله html چیست؟ را مطالعه کنید در این مقاله به صورت کامل در مورد زبان نشانه گذاری HTML صحبت کرده ایم.

۲- زبان استایل دهی CSS

بعد از اینکه در مورد HTML صحبت کردیم حال می خواهیم در مورد زبان استایل دهی CSS توضیحاتی رو ارائه دهیم. در مقاله html چیست گفتیم که از html برای نمایش المان ها و لایه بندی ساختار صفحه استفاده می شود و برای طراحی یک صفحه و زیبایی سازی صفحه، امکانات خوبی را در اختیار طراح سایت قرار نمی دهد. با آمدن زبان css این مشکل زیبا سازی صفحات وب حل شد. 
css مخفف Cascading Style Sheets می باشد که نحوه نمایش عناصر داخل یک صفحه رو مشخص می کند و به طراح کمک میکند که بتوانند به تمام بخش ها و عناصر یک صفحه کنترل داشته باشد.

نکته ۱: html یک موجودیت است که css به آن خصوصیت می دهد.

مثال: مثلا در html میتوان از طریق تگ <div> یک کادر درست کرد که این کادر هیچ چیزی ندارد و در واقع تهی می باشد و خصوصیت خاصی ندارد. طراح میتواند از طریق css به این کادر خصوصیت طول ، عرض ، رنگ پس زمینه و . . . دهد.

نکته ۲: CSS مخفف Cascading Style Sheets که به معنی شیوه‌نامهٔ آبشاری یا روی‌انداز آبشاری سَبْک است.

زبان CSS در کنار HTML ارائه و استفاده می شود این دو زبان معمولا کنار هم به کار میروند. از CSS برای طراحی صفحات استفاده می شود. به عنوان مثال: برای تغییر فونت یا تصویر پس زمینه وب سایت 

با زبان CSS چه کارهایی میتوان انجام داد :

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

توجه: برای درک بهتر CSS پیشنهاد میکنم مقاله CSS چیست؟ را مطالعه کنید در این مقاله به صورت کامل در مورد زبان استایل دهی CSS صحبت کرده ایم.

 چرا باید در گام اول HTML و CSS رو یاد بگیریم؟

ببینید دوستان عزیز وقتی HTML و CSS رو یاد می گیرید چون ساده هستند یک انگیره عالی برای ادامه راه می شود و همین موضوع باعث می شود برنامه نویسی رو ول نکنیم و کلا بیخیال نشیم. دوما اگر این این دو رو بلد باشید خیلی کارتون راحتر می شود و سریعتر جلو می روید. پس پیشنهاد میکنم قبل انتخاب زبان برنامه نویسی برای طراحی سایت، حتما HTML و CSS رو کامل یاد بگیرید و مسلط شوید. 

منبع برای یادگیری و آموزش HTML و CSS 

اگر به دنبال این هستید که به صورت کامل html و css رو فرا بگیرید، پیشنهاد میکنم حتما از دوره آموزش کامل طراحی وب سایت – پروژه محور دیدن نمایید. در این دوره به صورت کاملا پروژه محور و بازاری، دو قالب وبسایت (قالب وبلاگی و شرکتی) را از صفر آموزش میدهیم. تمام کدهای آموزش داده شده همان کدهایی است که در پروژه های واقعی استفاده می کنیم. ۶ جلسه اول رو هم به صورت رایگان برای شما قرار داده ایم تا به راحتی بتوانید انتخاب کنید. 

جلسات رایگان دوره آموزش جامع و پروژه محور HTML و CSS 

(بیش از ۲ ساعت فیلم آموزشی، کل دوره بیش از ۹٫۵ ساعت) :
جلسه یک | جلسه دو | جلسه سه | جلسه چهارم | جلسه پنجم | جلسه ششم