ساخت اولین صفحه وب

ساخت اولین صفحه وب


حال زمان آن فرا رسید که یک صفحه وب را با استفاده از HTML ایجاد کرده و سپس آن را در یک مرورگر مشاهده کنید.

خب، مستقیما به سراغ مبحث اصلی می رویم. در اینجا، به شما یاد می دهیم که ساختن یک صفحه وب چقدر ساده است. در حقیقت، زمانی که به انتهای این جلسه می رسیم، شما صفحه وب خود را ایجاد کرده اید.

برای ساخت صفحات وب معمولا 4 عمل اصلی انجام می شود که عبارت است از:

1» ساخت فایل HTML

2» نوشتن کدهای HTML

3» مشاهده نتیجه در مرورگر

4» تکرار مرحله دو و سه (اگر نیاز باشد)

ایجاد صفحه وب

خب، حالا مراحل بالا را یک به یک توضیح می دهیم.

ساخت فایل HTML

یک فایل HTML با پسوند .html یا .htm ذخیره می شود. فایل های متنی ساده مثلا فایل هایی که در نت پد به صورت پیشفرض ذخیره می شوند فرمت .txt دارند.

1- ما در این آموزش از نرم افزار Notepad++ استفاده می کنیم، شما می توانید از ویرایشگرهای متنی یا ویرایشگرهای HTML دیگر استفاده نمایید. توجه داشته باشید که اساس کار همه ی ویرایشگرهای HTML یکسان است امّا در جزئیات مانند ارائه تگ های پیشنهادی و محیط کاری تفاوت دارند. اگر نرم افزار Notepad++ را ندارید می توانید آن را از وب سایت رسمی آن یا سایت های معتبر دانلود نرم افزار تهیه نمایید. پس از نصب و بازکردن برنامه شما گزینه های بسیاری در اختیار دارید از جمله تغییر زبان که این برنامه از زبان فارسی نیز پشتیبانی می کند و همچنین تم های مختلف، گزینه جستجو در اینترنت و بسیاری از گزینه های دیگر. در گام اوّل به منوی بالای برنامه مراجعه کرده و گزینه Languageرا انتخاب نمایید.

2- پس از کلیک روی گزینه Language فهرستی باز می شود که از آن فهرست موس خود را روی حرف Hبرده تا منوی دوّم باز شود، سپس گزینه HTML را همانطور که در تصویر زیر مشخص شده، انتخاب نمایید تا ویرایشگرما به HTML تغییر پیدا کند. هنگامی که اینکار را انجام می دهیم، نرم افزار به صورت خودکار پس از ذخیره فایل آن را با پسوند .html ذخیره می کند.

انتخاب زبان در Notepad++

3- در سمت چپ گزینه Language گزینه Encoding را کلیک کرده و از منوی باز شده گزینه Encode in UTF-8-BOM را انتخاب نمایید (این گزینه باعث می شود صفحه وب ما از زبان فارسی پشتیبانی کند.

حال می رسیم به مرحله دوّم:

نوشتن کدهای HTML

حال کدهای زیر را در ویرایشگر خود تایپ کنید:

نوشتن کدهای اولیه

زمانی که کدها را نوشتید باید آن را ذخیره کنید تا اوّلین صفحه وب شما آماده شود. برای اینکار همانند اکثر برنامه های کامپیوتری می توانید با فشار دادن کلیدهای Ctrl+S در پنجره ی باز شده محل فایل ذخیره را انتخاب و با انتخاب گزینه Save فایل را ذخیره نمایید.

حال به سراغ مرحله سوّم می رویم:

مشاهده نتیجه در مرورگر

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

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

مثال آموزش HTML

به همین سادگی اوّلین صفحه وب ما ساخته شد. شما همچنین می توانید با راست کلیک کردن روی فایل ساخته شده از منوی کشویی گزینه Open With را انتخاب و سپس روی مرورگر دلخواه کلیک کنید تا فایل در مرورگر مورد نظرتان باز شود (البته برای انجام اینکار شما باید چندین مرورگر را در سیستم عامل خود داشته باشید).

حال می توانیم به مرحله چهارم برویم:

تکرار دو مرحله آخر تا زمانی که نتیجه دلخواه بدست آید

اگر فکر می کنید می توانید با یکبار نوشتن کدهای HTML به نتیجه دلخواه برسید کاملا در اشتباه هستید. امّا نگران نباشید همین خوب است! فقط دوباره و دوباره امتحان کنید تا زمانی که همه چیز باب میل شما شود.

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

توضیحات کد

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

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

در جلسه بعدی جزئیات بیشتری در مورد تگ های HTML خواهیم آموخت.

جلسه قبل | جلسه بعد

تبلیغات در پایین ادامه ی مطلب

نظرات شما


    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی