امتیاز دهید:

پس از نصب نرم افزار Wamp روی سیستم عامل خود، ابتدا وارد فولدر wamp  می شویم:

new-project-in-wamp

در تصویر بالا می بینیم که به درایو سی رفته و روی فولدر wamp کلیک می کنیم:

2 new-project-in-wamp

همانطور که می بینیم داخل فولدر wamp فولدری وجود دارد تحت عنوان www که این فولدر در توسعه وب اپلیکیشن از اهمیت بسزایی برخوردار است چرا که فایل های مرتبط با وب اپلیکیشن ما داخل این فولدر قرار خواهند گرفت که بعداً از طریق localhost به آنها دسترسی خواهیم داشت. با کلیک روی این فولدر وارد آن می شویم:

3-new-project-in-wamp

همانطور که در تصویر بالا می بینیم دو فایل پیش فرض داخل این فولدر وجود دارند که در حین نصب نرم افزار Wamp ایجاد می گردند. کاری که در این مرحله می بایست انجام دهیم این است که فولدری ایجاد کنیم که مرتبط با وب سایتی باشد که می خواهیم توسعه دهیم. در این آموزش نام my_website را انتخاب می کنیم (توجه داشته باشیم که این نام نمی بایست حاوی حروف بزرگ و فاصله باشد. برای مجزا ساختن بخش های مختلف نام می توانیم از _ استفاده کنیم. این علامت که اصطلاحاً Underscore نامیده می شود با هم زمان فشار دادن کلید های Shift و دکمه Dash ایجاد می گردد. دکمه Dash در کیبوردهای استاندارد در کنار دکمه 0 قرار دارد).
اکنون می توانیم برنامه ++Notepad را باز کنیم:

4-new-project-in-wamp

سپس از منوی اصلی نرم افزار روی گزینه File کلیک کرده و همانطور که در تصویر بالا می بینیم روی گزینه New کلیک می کنیم تا یک سند جدید ایجاد گردد:

5-new-project-in-wamp

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

6-new-project-in-wamp

همانطور که می بینیم یک تگ آغازین و پایانی مرتبط با <html>، یک تگ آغازین و پایانی مرتبط با <head>، یک تگ آغازین و پایانی <title> و یک تگ آغازین و پایانی <body> ایجاد کرده ایم. از آنجا که می خواهیم در مرورگر نام این پروژه نمایش داده شود، داخل تگ های مربوط به title به معنی "عنوان" عبارت My Website را می نویسیم. اگر به رنگ کدها در نرم افزار ++Notepad توجه کنیم می بینیم که کلیه عبارات به رنگ مشکی هستند و این در حالی است که یکی از قابلیت های کلیدی این نرم افزار Code Highlighting یا به عبارتی "رنگی نشان دادن بخش های مختلف کد" است. در حقیقت علت این مسئله آن است که ما فایل خود را هنوز ذخیره نکرده ایم تا پسوندی برای آن مشخص گردد. در ادامه  از منوی اصلی روی گزینه File کلیک کرده و سپس گزینه Save را انتخاب می کنیم:

 7-new-project-in-wamp

حال برای انتخاب مسیر برای ذخیره سازی این فایل ابتدا وارد درایو سی شده و فولدر wamp را انتخاب کرده، سپس وارد فولدر www شده و سپس داخل فولدری که قبلا تحت عنوان my_website ایجاد کرده بودیم می شویم:

8-new-project-in-wamp

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

9-new-project-in-wamp

به محض Save کردن این فایل با پسوند اچ تی ام ال می بینیم که کدها به صورت رنگی در می آیند چرا که از این پس نرم افزار ++Notepad می داند که با یک فایل اچ تی ام ال سر و کار دارد. از سوی دیگر نام index.html در تب بالای این سند به نمایش در می آید. اگر به فولدر my_website وارد شویم می بینیم که فایلی تحت عنوان index.html داخل فولدر ایجاد شده است که قبلاً وجود نداشت:

10-new-project-in-wamp

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

11-new-project-in-wamp

همانطور که می بینیم عنوان سایت نوشته شده است اما داخل پنجره اصلی فایرفاکس هیچ چیزی نشان داده نمی شود و علت این مسئله هم آن است که هیچ مطلبی داخل تگ مربوط به <body> ننوشته ایم. برای ادامه کار مجدد به نرم افزار ++Notepad بازگشته و اقدام به تکمیل کد خود می کنیم:

داخل تگ <body> شروع به کدنویسی می کنیم. ابتدا با استفاده از یک تگ مربوط به "عنوان" مثل <h1> عنوانی برای صفحه خود انتخاب می کنیم که در اینجا عبارت In the Name of the Most High به معنی "به نام خدا" را در نظر گرفته ایم (توجه داشته باشیم که تگ پایانی </h1> را بایستی پس از این عبارت بنویسیم). سپس از یک تگ پاراگراف استفاده کرده و عبارت Hello World به معنی "سلام دنیا" را داخل آن می نویسیم. اکنون نیاز داریم تا این فایل را Save کنیم. برای این منظور دو راه کار وجود دارد. راه کار اول اینکه از منوی اصلی وارد گزنیه File شده و سپس روی گزینه Save کلیک می کنیم. راه کار دوم اینکه از کلید های Ctrl + S استفاده می کنیم. پس از ذخیره کردن این فایل مجدد به مرورگر فایرفاکس باز می گردیم:

opening--an-html-page-in-firefox

می بینیم که مجدد صفحه خالی است و تغییرات اعمال نشده اند. برای اعمال این تغییرات از کلید های Ctrl + R استفاده می کنیم تا اصطلاحاً صفحه را Refresh کنیم:

1-opening--an-html-page-in-firefox

بلافاصله پس از زدن دکمه های Ctrl + R می بینیم که عباراتی که داخل کد خود اضافه کردیم نمایش داده می شوند. در ادامه برای آنکه بتوانیم Source Code خود را از داخل فایرفاکس مشاهده کنیم، روی صفحه کلیک راست کرده و گزینه View Page Source را کلیک می کنیم:

showing-page-source

پس از کلیک روی این گزنیه می بینیم که پنجره جدیدی به صورت زیر باز می شود:

1showing-page-source

می بینیم که دقیقاً کدهایی که داخل ++Notepad نوشتیم اینجا نمایش داده می شود که همگی کدهای اچ تی ام ال هستند. در آموزش بعد خواهیم دید که به چه شکل می توان یک سند HTML را به یک سند PHP تغییر داد.


نظرات
نظرات
  • علی باقری :

    سلام . من وقتی برنامه رو نصب می کنیم این پیام رو میده . لطفا راهنمایی کنید.
    the program can't be start because MSVCR110.dll is mising from your computer . try to reinstalling.


    1394/09/05 17:49:53
  • mahdi :

    سلام
    اول از همه از سبک آموزشتونکه به زبان ساده است تشکر میکنم ولییییییییییی
    چرا فایل pdf آموزسها را داخل سایت قرا نمی دهید؟؟؟؟؟


    1394/03/14 18:00:13
  • Elham :

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


    1394/02/13 06:06:09
  • jahanzad :

    سلام
    ضمن تشکر از آموزش های خوب شما که بشخصه بسیار استفاده کرده ام
    من wamp را نصب کردم وارد پوشه www که می شوم آن دو فایل پیش فرض php وجود دارند اما آیکون های آن ها نوار سبز رنگ php را ندارند بلکه کاملا سفید هستند چرا؟


    1393/09/05 21:51:43
  • بهزاد مرادی :

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

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


    1393/06/15 06:25:04
  • mnr73 :

    سلام آقای مرادی من این تمریناتو با brakets انجام دادم چون شما تو سایت سکان آکادمی پیشنهاد دادید و من از اول با همون کار کردم.خواستم ببینم حالا کدوم بهتره با کدوم کار کنم؟ notpad++ هم روی سیستم هست.
    سوال دوم:در اینجا ما از

    استفاده نکردیم.مگه نگفتید این درستور برای شناسایی ورژن html برای سرور مهم هست؟


    1393/06/13 14:24:50
  • zeinab :

    سايت بسيار عالي و خوبيه


    1393/05/29 11:24:33
  • بهزاد مرادی :

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



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


    1393/05/26 06:18:00
  • سپیده :

    با سلام و خسته نباشید
    من از دانشجوهای اندروید و جاوای شما هستم و الانم php که باید باز هم مثل قبل از شما تشکر کنم و خدا رو سپاسگذر باشم بابت شرایطی که برای بنده هاش فراهم میکنه من برنامه wamp رو دانلود کردم اما به اینجا که رسیدم گزینه my- website رو در پوشه www ندارم دوباره دانلود کردم نشد ، ممنون میشم اگر من رو راهنمایی کنید

    بازهم متشکر و از خدای بزرگ برای شما توفیق و سربلندی رو خواستارم.


    1393/05/25 11:29:21
  • بهزاد :

    در پاسخ به mortazavi

    اینکه اموزش html هست
    php کو


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

    با سپاس فراوان
    بهزاد مرادی


    1393/03/19 09:09:02
  • mortazavi :

    اینکه اموزش html هست
    php کو


    1393/03/18 10:49:38