همانطور که گفته شد پایه و اساس کلی در طراحی سایت، کدهای html است. در نتیجه برای شروع طراحی سایت ابتدا باید مفهوم “html چیست؟” را دریابیم سپس اقدام به آموزش html کنیم. گام اول برای طراحی سایت نوشتن کدهای html و طراحی اولین صفحه html است. برای نوشتن html از نرم افزار دفترچه یادداشت (Notepad) و یا ویرایشگر متن (TextEdit) استفاده می کنیم. برای ویرایش سند html می توانیم از ویرایشگر های حرفه ای زیر بهره ببریم:

• Microsoft WebMatrix
• Sublime Text

با این حال در آموزش html توصیه می شود که برای ویرایش کدها از ویرایشگر Notepad در کامپیوتر شخصی (PC) و یا ویرایشگر TextEdit در سیستم عامل مک (Mac) استفاده کنید. زیرا اعتقاد بر این است که ویرایشگر متن ساده، راه خوبی برای یادگیری html است. برای ایجاد و طراحی سایت اولین صفحه سایت خود مراحل زیر را در نت پد اجرا کنید.

مرحله اول: باز کردن Notepad

در ویندوز 7 و یا قبل از آن: بر روی آیکون استارت (در قسمت پایین سمت چپ صفحه) کلیک کنید. گزینه All Programs (همه برنامه ها) را انتخاب کنید. بر روی گزینه Accessories (برنامه های جانبی) کلیک کرده و از آن Notepad را انتخاب کنید.

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

مرحله 2: نوشتن برخی از کدهای HTML

کدهای اصلی html را مانند شکل زیر نوشته و یا کپی کنید.

مرحله 3: ذخیره صفحه html

بعد از نوشتن کدهای اساسی در html که تعیین کننده قاب کلی در طراحی سایت است، باید سند html خود را در کامپیوتر ذخیره کنید. از منوی Notepad، گزینه فایل (File) و سپس گزینه Save as را انتخاب کنید. برای نام فایل html را “index.html” و یا هر نام دیگری که با html. و یا htm. تمام شود را انتخاب کنید و encoding (رمز گذاری) را بر روی گزینه UTF-8 تنظیم کنید.

گام 4: مشاهده صفحه HTML در مرورگر

فایل HTML ذخیره شده را در مرورگر مورد علاقه خود باز کنید. برای این کار بر روی فایل html خود دوبار کلیک کنید و یا کلیک راست کرده و از گزینه open with، مرورگر مورد نظر خود را انتخاب کنید. نتیجه به شکل زیر در صفحه مرورگر نمایش داده خواهد شد: