زمینهٔ سمت راست site manager جایی است که تمام محتوای صفحه وارد میشود. برای وارد کردن متن، خیلی ساده روی پنجره کلیک کنید و شروع کنید به وارد کردن متن. نگران قلمها و دیگر مسایل قالببندی متن نباشید، بعداً به آنها هم خواهیم رسید. بعد از وارد کردن چند خط، باید پروندهٔ خود را ذخیره کنید. از آنجایی که این صفحه، صفحهٔ اول یا پیشفرض وبسایت است، باید index.html نام بگیرد. ذخیره کردن صفحه با کلیک کردن روی دکمهٔ «Save» در گوشهٔ بالا و سمت چپ پنجرهٔ NvU صورت میگیرد. از آنجایی که این اولین باری است که صفحه ذخیره میشود، یک پنجرهٔ محاورهای ظاهر میشود و عنوان صفحه را میپرسد.
میتوانید هر متنی که میخواهید اینجا وارد کنید. متنی که اینجا وارد می کنید، زمانی که صفحه را میبینید در نوار عنوان مرورگر وب نمایش داده میشود. بعداً هر زمان که خواستید میتوانید این عنوان را تغییر دهید. بعد از اینکه روی «OK» کلیک کردید، یک پنجرهٔ محاورهای دیگر باز میشود و از شما میخواهد که پرونده را ذخیره کنید. این مهم است که مطمئن شوید که پرونده را در همان پوشهای ذخیره میکنید، که به هنگام تعریف کردن وبگاه آن را ساخته بودید. پرونده را با نام index.html در پوشهٔ Tutorial_Site که قبلاً ساخته بودید، ذخیره کنید. به احتمال زیاد کارگزار وبی که بعداً پروندههای خود را روی آن بارگذاری میکنید، هنگامی که یک کاربر نشانی وبگاه شما را وارد میکند و نام صفحهٔ خاصی را مشخص نمیکند، صفحهٔ index.html را به صورت خودکار نمایش میدهد. کمی جلوتر در این مورد بیشتر توضیح خواهیم داد، اما فعلاً مطمئن شوید که صفحهای که میخواهید کاربران به هنگام ورود به وبسایت شما ببینند، index.html (بدون هیچ نویسهٔ بزرگی) نام دارد.
روی «Save» کلیک کنید. باید بتوانید پروندهٔ index.html را در site manager ببینید. اگر نمیبینید، روی دکمهٔ Refresh کلیک کنید تا ظاهر شود. اگر باز هم دیده نشد، به این معنی است که احتمالاً شما پرونده را در پوشهای که مربوط به وبسایت است ذخیره نکردهاید. اگر خواستید مطمئن شوید، مراحل بالا را مجدداًتکرار کنید تا بالاخره این پرونده را در site manager ببینید.
بیایید یک تصویر به صفحه اضافه کنیم. قبل از درج کردن تصویر، لازم است که تصویر را در پوشهٔ Images قرار دهیم. قبل از آنکه تصویر را در این پوشه قرار دهید، مطمئن شوید که تصویر از اندازهٔ مناسبی برای نمایش در وب برخوردار است. در نظر داشته باشید که پروندههای بزرگتر نسبت به پروندههای کوچکتر زمان بیشتری برای بارگیری احتیاج دارند و اینکه تمام تصاویر در وب با واحد نقطه (Pixel) سنجیده میشوند. برای آشنایی بیشتر با این موضوع از راهنمای گیمپ (برنامهای اُپنسورس برای ویرایش و دستکاری تصاویر) استفاده کنید. تصویر را با قالب jpg ذخیره کنید و مطمئن شوید که پسوند پرونده jpg. یا jpeg. است. اگر خواستید میتوانید از هر یک از تصاویری که من برای مثال آماده کردهام استفاده کنید.
اگر پروندهٔ تصویر در پوشهٔ تصاویر نیست، با هر سیستمعاملی که کار میکنید آن را در پوشهٔ Images قرار دهید.
حالا باید بتوانید پروندهٔ تصویر را در پوشهٔ Images در قسمت site manager ببینید. اگر آنجا دیده نمیشود، دکمهٔ «Refresh» را امتحان بکنید.
زمان آن است که تصویر را در صفحه درج کنیم. در منوی بالای پنجرهٔ NvU روی insert > image کلیک کنید. یک پنجرهٔ محاورهای نمایش داده میشود. روی دکمهٔ «Choose File» کلیک کنید. پروندهای که در پوشهٔ Images وبسایتتان است را انتخاب کنید و روی دکمهٔ «Open» کلیک کنید. پیش از آنکه روی «OK» کلیک کنید، چند چیز است که باید تنظیم کنید. اول مطمئن شوید که متن زیر Image Location، با نام پوشهٔ تصاویر وبسایت شروع میشود. همچنین اگر که جعبهٔ نشانهزنی URL is relative to page location نشانه نخورده است، آن را نشانه بزنید. در نهایت متنی را در قسمت Alternate Text وارد کنید.
وقتی همهچیز درست وارد شده بود، روی دکمهٔ «OK» کلیک کنید. تصویر باید روی صفحه نمایش داده شود. حالا زمان خوبی است که صفحهای را که تصویر بر آن اضافه شده است ذخیره کنید. تنها روی دکمهٔ «Save» در قسمت بالا و سمت چپ صفحه کلیک کنید. اگر هنگام اضافه کردن تصویر به صفحه، کلید Enter را روی صفحهکلید نزده باشید، تصویر در انتهای متن صفحه اضافه میشود. اگر این کار را کرده باشید، تصویر در سطر خودش وارد میشود، گویی که یک پاراگراف جدید است. نگران تنظیم کردن محل تصویرتان در حال حاضر نباشید. بعداً به آن خواهیم رسید. الآن مهم این است که تصویر در پوشهٔ مناسب وجود داشته باشد، و شما اطلاعات کافی را در اختیار مرورگر قرار دادهاید که بتواند به تصویر دسترسی داشته باشد. به همین دلیل بود که تمام آن اطلاعات را در پنجرهٔ Image Properties وارد کردید.
هنگامی که NvU تصویر را در صفحه «درج» کرد، در حقیقت دستورالعمل نحوهٔ دسترسی مرورگر وب را به تصویر و کمی اطلاعات در مورد نحوهٔ نمایش آن ذخیره کرد. برای اینکه این مسئله را به صورت عملی ببینید روی زبانهٔ Source در پایین پنجرهٔ NvU کلیک کنید. این کار کُد HTML که NvU برای شما نوشته است را نمایش میدهد. نگران نباشید، قرار نیست شما مستقیماً با این کُد کار بکنید، ولی خوب است بدانید که NvU برای شما چه کار میکند و یک تصویر در HTML چگونه بهنظر میرسد. کلیک کردن روی دکمهٔ Normal در پایین پنجرهٔ NvU دوباره شما را به بخش آشناتر برمیگرداند.
به قسمتی از کُد که شبیه زیر است نگاه کنید:
<img style="width: 500px; height: 375px;" alt="This is a picture of cheese" src="files/cheese.jpg">
این کُد HTML است که به مرورگر وب میگوید: «یک تصویر با ابعاد ۳۷۵×۵۰۰ نقطه نمایش بده. میتوانی آن را در پوشهٔ Images در همان محلی که این صفحه ذخیره شده است پیدا کنی و نام این تصویر cheese.jpg است. اگر برای نمایش دادن تصویر مشکل داری تنها متن «This is a picture of cheese» را نمایش بده!».
قسمت مهم «src="files/cheese.jpg» است. این همان قسمتی است که HTML به مرورگر میگوید که از کجا میتواند تصویر را بیابد. این دستورالعمل URL نام دارد (مخفف Universal Resource Locator) و نحوهٔ نوشته شدن یک URL به یک مرورگر میگوید که تا چند پله باید پیش برود تا به هدفش (که یک پرونده است) برسد. ۲ نوع URL وجود دارد، نسبی (relative) و مطلق (absolute). قبل از آنکه در مورد تفاوت این دو نوع صحبت کنیم، بیایید دو پیوند به صفحههای دیگر، یکی را نسبی و دیگری را مطلق بسازیم.
