پس از مطالعه تئوری های مرتبط با زبان اچ تی ام ال در آموزش های قبل، در این آموزش می خواهیم اولین صفحه وب سایت خود را بسازیم. برای این منظور یک ویرایشگر متن مورد علاقه را انتخاب کرده و شروع به کدنویسی می کنیم (لازم به ذکر است که توصیه می شود به هیچ وجه از نرم افزارهایی مثل Dreamweaver و Microsoft Expression و ... استفاده نشود. در واقع از آنجا که قرار است با تکرار و تمرین کدهای اچ تی ام ال آن ها را ملکه ذهن خود کنیم پس یک نرم افزار ویرایشگر متن مثل Notepad یا Notepad++ یا Brackets از شرکت ادوبی را مورد استفاده قرار می دهیم).
پیش از شروع کدنویسی دانستن این نکته ضروری است که همان طور که ما با یکدیگر به زبان فارسی صحبت می کنیم، زبان اچ تی ام ال هم با مرورگر صحبت می کند اما طرز صحبت کردن اچ تی ام ال متفاوت از شیوه ای است که با یکدیگر صحبت می کنیم. در واقع یک مرورگر کدهای اچ تی ام ال را از بالا به پایین و از چپ به سایت می خواند. به عبارت دیگر کدهایی که بالاتر نوشته شوند نسبت به کدهایی که پایین تر نوشته شود زودتر نمایش داده می شوند. برای روش شدن مطلب فوق می توان تصویر زیر را مد نظر قرار داد:
همانطور که در تصویر فوق می بینیم، کدها ابتدا از بالا توسط مرورگر تفسیر می شوند. اگر به بخش body توجه کنیم می بینیم که یک تگ <h1> و یک تگ <p> قرار دارد. حال از آنجا که تگ های بالاتر زودتر به نمایش در می آید پس می توان این انتظار را داشت که اول عبارت Heading سپس عبارت Paragraph در صفحه مرورگر نمایش داده شود. اکنون با دانستن این نکات می توانیم با دید بهتری اقدام به نوشتن اولین صفحه وب سایت خود نماییم.
پس از باز کردن نرم افزار Notepad یا Notepad++ شروع به نوشتن کدهای زیر می کنیم:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html><html> <head> <title>Netshahr</title> </head> <body>In the Name of the Most High Hello World! </body> </html> |
همانطور که در کد فوق ملاحظه می شود، ابتدا دستور <!DOCTYPE html> را نوشته ایم تا به مروگر ها این پیغام را برسانیم که نسخه اچ تی ام ال استفاده شده در این صفحه وب سایت نسخه 5 است. عنوانی که برای این صفحه در نظر گرفته ایم Netshahr است. سپس در بخش body سایت ابتدا عبارت In the Name of the Most High به معنی "به نام خدا" را نوشته سپس در خط بعد عبارت Hello World! را به معنی "سلام دنیا" نوشته ایم.
حال زمان آن فرا رسیده تا این فایل را Save کنیم. نکته ای که در مورد ذخیره سازی این فایل همواره می بایست مد نظر قرار دهیم این است که پسوند فایل مد نظر می بایست حتما html یا htm باشد (لازم به ذکر است که این دو پسوند هیچ فرقی با یکدیگر نمی کنند و بنا به سلیقه خود می توانید یکی را در همین ابتدای راه انتخاب کرده و همواره در ساخت صفحات وب خود آن را مورد استفاده قرار دهید).
برای این صفحه نام index.html را در نظر می گیریم. علت انتخاب نام index برای این صفحه این است که معمولاً نرم افزارهای وب سروری که روی هاست شرکت میزبانی خدمات وب نصب هستند که این وظیفه دارند تا فایل های وب سایت ما را برای مرورگر کاربران اینترنتی ارسال کنند به صورت پیش فرض نام index را برای صفحه اصلی سایت مبنا قرار می دهند. به طور مثال زمانیکه شما آدرس www.netshahr.com را در مرورگر خود تایپ می کنید، نرم افزار وب سرور می گردد روی سرور تا فایلی با نام index را بیابد و به محض یافتن آن را برای مرورگر شما ارسال می کند. لازم به ذکر است گاهی اوقات به جای نام index از default هم استفاده می شود که این بستگی به شرکت خدمات میزبانی وب دارد (به طور کلی منظور از وب سرور، نرم افزاری است که روی سرور شرکت میزبانی خدمات وب نصب است که این وظیفه را دارا است تا مابین مرورگر کاربر و سرور هاست ارتباط برقرار سازد).
به عنوان یک قرارداد بین المللی، برنامه نویسان مبتدی اولین برنامه ای که در هر زبان برنامه نویسی می نویسند را با عبارت Hello World به معنی "سلام دنیا" شروع می کنند. تاریخچه این عبارت به سال 1972 بر می گردد که در آن سال آقای Brian Kernighan یک کتابچه آموزش زبان برنامه نویسی B تالیف کرد که در آن اولین برنامه ای که آموزش داده شد این بود که عبارت Hello World روی صفحه به نمایش در آید. بنابراین از آن تاریخ تاکنون برنامه نویسان به احترام این برنامه نویس، اولین برنامه خود را با این عبارت آغاز می کنند.
پس از بررسی نکاتی تکمیلی، حال قصد داریم تا اولین صفحه از وب سایت خود را در یک مرورگر مثل فایرفاکس به نمایش در آوریم. برای این منظور سه راه کار وجود دارد. راه کار اول اینکه به مسیری که فایل اچ تی ام ال خود را در آن ذخیره کرده رفته و روی نام فایل کلیک راست کرده و گزینه Open را انتخاب می کنیم:
سپس خواهیم دید که این صفحه از سایت مان در مرورگر پیش فرض باز خواهد شد.
راه کار دوم این است که مرورگر مد نظر خود را باز نموده سپس از منوی اصلی وارد منوی Open File شده و مسیری که فایل اچ تی ام ال خود را در آن ذخیره کرده ایم را وارد می کنیم (لازم به ذکر است که بسته به نوع مرورگر ممکن است این روش باز کردن فایل اچ تی ام ال متفاوت باشد. این آموزش در مورد مرورگر فایرفاکس است):
لازم به ذکر است که برای باز کردن یک فایل داخل مرورگر می توان به جای استفاده از منوی مرورگر دکمه های Ctrl + O را به صورت هم زمان فشار داد. در واقع از آن جهت کلید O برای باز کردن یک فایل جدید انتخاب شده است که حرف O ابتدا کلمه Open به معنی باز کردن می باشد.
و در نهایت راه کار سوم این است که به صورت Drag and Drop فایل مد نظر خود را گرفته و روی نرم افزار فایرفاکس که از قبل آن را باز کرده ایم رها می سازیم.
با اتخاذ هر کدام از رویکردهای فوق، صفحه وب سایت ما به صورت زیر نمایش داده خواهد شد:
می بینیم که با موفقیت توانستیم اولین صفحه از وب سایت خود را در یک مرورگر به نمایش در آوریم. اما این صفحه دارای دو مشکل است. مشکل اول اینکه این صفحه اصلا زیبا نیست که در آموزش های آتی به این نکته هم خواهیم پرداخت و مشکل دوم اینکه اگر به کد خود توجه کنیم ما عبارت In the Name of the Most High را در یک خط نوشتیم و عبارت hello World را در خط دیگری اما این در حالی است که مرورگر هر دو خط را پشت سر هم قرار داده است.
علت این مسئله این است که مرورگر هر آنچه را که داخل تگ های <body> و </body> باشد را پشت سر هم نمایش داده و هیچ توجهی به فواصلی که مابین کدها قرار دارد نخواهد کرد.
برای رفع این مشکل می بایست هر جمله خود را داخل یک پاراگراف قرار دهیم که در آموزش شانزدهم به تفصیل این موضوع را مورد بررسی قرار خواهیم داد.
آشنایی با تگ p در زبان اچ تی ام ال (html)