پس از نصب نرم افزار 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 تغییر داد.