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

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

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

آموزش ساخت سایت گام اول ( دامنه و هاست )

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

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

حالا به سراغ نام فروشگاه می رویم که معادل دامنه در اینترنت است. دامنه به نوعی نام و آدرس فروشگاه شماست . فرض کنید نام لباس فروشی ما لباس فروشی طوفان است. حالا می خواهیم این نام را روی سایت خود قرار بدهیم . حتما با پسوند های مختلف برای سایت بر خورد کرده اید. مثلا .ir یا  .com یا .org و... این پسوندها برای یکتا کردن آدرس سایت شما هستند. یعنی اگر شخصی نام فروشگاه شما بعلاوه پسوند صحیح را وارد کند به صورت مستقیم وارد سایت شما می شوند. حالا می خواهیم نام سایت را به انگلیسی یا فینگلیش تغییر دهیم . حالا به سراغ نام طوفان میرویم برای برگرداندن این نام به یک مشکل بر می خوریم این نام در انگلیسی املا های متفاوتی دارد .ممکن است این نام به صورت های زیر نوشته شود :

Toofan

Tofan

Toufan

Toofun

2Fun

Twofan

و چند ترکیب دیگر از این نوع ...

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

پسوند دامنه ها دارای قیمت های مختلفی است ولی نسبت به هم برتری ندارند. این تفاوت قیمت به علت نوع پرداخت آن می باشد ( ارزی یا ریالی) البته هزینه دامنه از طریق ریال پرداخت می گردد اما کارگذار این مبلغ را باید تبدیل به ارز کند و به شرکت های اصلی واگذار کند. هزینه ثبت دامنه از 17 هزار تومان تا 350 هزار تومان متفاوت است .

آموزش ساخت سایت گام دوم ( انتخاب زیر ساخت سایت )

سیستم های مختلفی برای راه اندازی یک وب سایت وجود دارد. در این بخش از آموزش ساخت سایت می خواهیم به شما بگوییم از چه زیر ساختی برای مدیریت و ساخت وب سایت استفاده کنید. سیستم های زیاد برای مدیریت محتوا وجود دارند که برخی از آن ها رایگان و برخی دیگر پولی هستند هر دوی این دو سیستم یک ضعف مشترک دارند و آن هم این است که هر دو سیستم دارای محدودیت های هستند. یک راه بهتر این است که شما به عنوان یک طراح سایت دست به کار شوید و با زبان های موجود برنامه نویسی یک سایت برای خود راه اندازی کنید. ما در کلیک سایت به شما آموزش ساخت سایت با زبان های مختلفی مثل PHP ،  Html ، CSS   ، ASP.Net و... می دهیم. نوشتن یک سایت به شما این کمک را میکند که تمام موارد دلخواه خود را در آن پیاده کنید.

آموزش ساخت سایت گام سوم ( طراحی گرافیکی )

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

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

جهت شروع آموزش html و آموزش css  و آموزش php کلیک کنید.

این کار بسیار بزرگیست که بتوانید یک سایت بسازید! بنابراین اگر شما برای توسعه وب تازه کار هستید، ما شما را تشویق میکنیم که از پروژه های کوچک شروع کنید . طبیعتاً شما نمی توانید فوراً یک فیس بوکِ دیگر بسازید!

ساخت سایت کار سختی نیست . ما در آموزش ساخت سایت، شما را از ملزومات لازم برای ساختِ اولین سایت تان مطلع می کنیم.

نصب نرم افزارهای پایه برای ساخت یک سایت

در آموزش ساخت سایت ، هنگامی که حرف از نرم افزارهای ساخت سایت ، به میان می آید، انتخاب های زیادی جلوی راه کاربران قرار می گیرد. اگر شما تازه کار باشید، شاید برای شما روبه رو شدن با انواع زیادی از ویرایشگر(editor) های مختلف ، فریمورک (framework)  های مختلف و ... گیج کننده باشد. درمورد نصب این نرم افزارهای پایه برای ساخت و توسعه وب نگران نباشید. در آموزش ساخت سایت، ما گام به گام برای شما نرم افزارهای مورد نیاز را بیان خواهیم کرد.

حرفه ای ها از چه ابزاری استفاده می کنند ؟

● یک کامپیوتر.شاید برای بعضی افراد واضح باشد، اما شاید برخی از شما در حال خواندن این مقاله در تلفن همراه خود و یا یک کامپیوتر در کتابخانه هستید. برای ساخت سایت، باید یک رایانه رومیزی یا لپ تاپ با سیستم عامل ویندوز، مک یا لینوکس تهیه کنید.

● یک ویرایشگر متن یا Text Editor، برای نوشتن کد نویسی از آنها استفاده می شود.آنها می توانند text editor باشند (مثل Sublime، Brackets، Atom یا ویژوال استودیو کد) یا یک hybrid editor یا ویرایشگر ترکیبی (مثل Dreamweaver یا WebStorm).

● مرورگرهای وب برای تست کدها. در حال حاضر مرورگرهایی که بیشترین استفاده را دارند عبارتند از Firefox, Chrome, Opera, Safari, Internet Explorer  و  Microsoft Edge. همچنین شما باید سایت خود را روی مرورگرهای قدیمی و موبایل نیز اجرا و چک کنید ، چون ممکن است کاربران سایت شما هنوز از مرورگرهای قدیمی مانند IE 8 تا 10 استفاده می کنند.

● یک ویرایشگر گرافیکی، مانند GIMP، Paint.NET یا فتوشاپ ، برای ایجاد تصاویر برای صفحات وب خود نیاز دارید.

● یک سیستم کنترل نسخه، اگر کار شما به صورت تیمی و گروهی باشد نیاز دارید تا کدها را روی سرور ذخیره کرده و به اشتراک بگذارید تا همه اعضای تیم بتوانند روی پروژه کار کنند و از تداخل کدها جلوگیری شود.  در حال حاضر Git محبوب ترین سیستم کنترل نسخه و GitHub سرویس میزبانی کد، بر اساس Git می باشد، که برای کارهای تیمی و گروهی بسیار محبوب است.

● یک برنامه FTP در حساب هایِ میزبانیِ وبِ قدیمی تر، برای مدیریت فایل ها در سرور از آن استفاده می شود و کاربران را قادر می سازد تا فایلهای خود را آپلود نمایند (مانند: فایل های متنی ساده، تصاویر، فایل های چند رسانه ای، و غیره)  و یا از طریق رایانه های شخصی به هاست خود دسترسی داشته باشند( امروزه GIT به طور چشم گیری به عنوان جایگزین FTP استفاده می شود) . تعداد برنامه های FTP بسیار است مانند :  Cyberduck, Fetch و FileZilla.

● یک سیستم اتوماسیون مانند Grunt یا Gulp برای انجام کارهای تکراری به صورت خودکار، مانند حذف کد و اجرای آزمایش.

● الگوها(Templates) ، کتابخانه ها(libraries) ، چارچوب ها(framework) ، و غیره برای سرعت بخشیدن به نوشتن عملکردهای مشترک.

سایت شما چه شکلی خواهد بود؟

در آموزش ساخت سایت، می آموزیم قبل از شروع به نوشتن کد برای سایت خود، ابتدا باید برای آن برنامه ریزی کنید، اینکه :

• چه اطلاعاتي را به شما نشان دهد؟
• چه فونت و رنگی برای آن استفاده کنید؟
• سایت شما به چه شکل و قالبی باشد؟

ما در آموزش ساخت سایت، یک روش ساده را که می توانید برای ساخت سایتِ خود برنامه ریزی کنید، شرح می دهیم.

● طرح خود قبل از شروع به ساخت سایت ، را طراحی کنید

قلم و کاغذ را بردارید و آنچه در ذهن خود در نگاه اول به سایت تان مشاهده می کنید، را طراحی کنید.

● متن

شما باید متن پاراگراف ها و عناوین را آماده کنید.

● رنگ تم

باید برای قالب و تم سایت خود، رنگ انتخاب کنید.برای انتخاب رنگ، به Color Picker بروید و رنگی را که دوست دارید پیدا کنید. هنگامی که روی یک رنگ کلیک میکنید، یک کد شگفت انگیز مثل # 660066 خواهید دید. این کد رنگ شما را نشان می دهد. اکنون کد را کپی کنید و در سایت استفاده کنید.

● انتخاب تصاویر

برای انتخاب یک تصویر، به Google Images بروید و تصاویر مناسب را جستجو کنید و در سایت خود از آنها استفاده کنید.

● انتخاب یک فونت:

در میان سایت های ارائه دهنده فونت های فارسی، جستجو کنید و فونت دلخواه خود را برای سایتتان انتخاب نمایید.

کار با فایل ها

در آموزش ساخت سایت، به شما می آموزیم که، یک سایت شامل بسیاری از فایل ها است: محتوای متن(text content)، کد(code)، صفحات استایل(stylesheets)، محتوای رسانه(media content) ای، و غیره.

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

مثلا برای ایجاد یک سایت فقط با یک صفحه ، به فایل های زیر نیاز داریم :

یک پوشه در محلی دلخواه در کامپیوتر خود ایجاد کنید و فایل های زیر را در آن قرار دهید:

1. index.html: این فایل به طور کلی شامل محتوای صفحه اصلی شما ، یعنی متن و تصاویری است که مردم هنگام بازدید از سایت شما به آن نگاه می کنند.

2. پوشه تصاویر(images folder): این پوشه شامل تمام تصاویری است که شما در سایت خود استفاده می کنید.

3. پوشه سبک (styles folder): این پوشه شامل کد CSS مورد استفاده برای محتویات سایت شماست (برای مثال، تنظیم متن و رنگ پس زمینه).

4. پوشه اسکریپت (scripts folder): این پوشه شامل تمام کد جاوا اسکریپت مورد استفاده برای اضافه کردن قابلیت های تعاملی به سایت شما می باشد (به عنوان مثال دکمه هایی است که داده ها را هنگام کلیک لود میکنند).

 اصول اولیه HTML

HTML ( اچ تی ام ال ) مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن است. کدی است که شما برای ساختن محتوای وب خود استفاده می کنید و به آن معناو هدف می دهید.  محتوای وب تشکیل شده است از پاراگراف ها، لیست ها، تصاویر، جدول ها که برای تولید این موارد باید زبان HTML را به خوبی بدانید.

 مبانی CSS  

الگوهای آبشاری (CSS) یا سی‌ اس‌ اس (به انگلیسی: CSS: Cascading Style Sheets ) کد هایی است که شما برای استایل دهی و اصطلاحاً رنگ و آب دادن به سایت خود از آنها استفاده می کنید.

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

یادگیری اصول CSS برای رسیدن به این اهداف لازم است.

 مبانی جاوا اسکریپت در آموزش ساخت سایت 

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

 انتشار سایت پس از ساخت  

پس از اتمام نوشتن کد و سازماندهی فایل هایی که سایت شما را تشکیل می دهند، شما باید آن را به صورت آنلاین قرار دهید تا مردم بتوانند آن را پیدا کنند و ببینند. شما می توانید از طریق این روش ها، سایت خود را برای دیدن همگان، انتشار دهید:

• گرفتن میزبانی(hosting) و نام دامنه(domain)
• با استفاده از یک ابزار آنلاین مانند GitHub یا Google App Engine
• با استفاده از یک IDE مبتنی بر وب مانند Thimble

چگونه وب کار می کند

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

این تئوری برای نوشتن کدهای وب در کوتاه مدت ضروری نیست، اما از درک آنچه در پس زمینه اتفاق می افتد، می توانید برای حرفه ای شدن در دنیای وب بهره ببرید.