برای ساخت یک سند HTML کافیست که پسوند یک فایل را به htm یا html تغییر دهیم ، در این صورت فایل مورد نظر به یک فایل HTML تبدیل می شود .
نکته : پسوند های htm و html برای ایجاد سند HTML می باشند اما پسوند html رسمی می باشد و بهتر است از این پسوند استفاده نماییم .
همانطور که در آموزش اول ( آموزش Html به زبان ساده ) گفتیم و نام بردیم سند HTML دارای چند تگ اصلی می باشد . حال می خواهیم نحوه ی چینش این تگ ها و کاربرد آنان را بررسی نماییم .
ابتدا تگ html را باز و بسته می نماییم زیرا تمامی سایت ما داخل این تگ قرار می گیرد .
<html> ... </html>
سپس در داخل آن تگ head را باز و بسته می نماییم زیرا تمامی قسمت های غیر قابل مشاهده ی سایت در این قسمت قرار می گیرند .
<html> <head> ... </head> </html>
در داخل تگ head از تگ های meta و title استفاده می کنیم .
<html> <head> <meta> <title> ... </title> </head> </html>
نکته : کاربرد این دو تگ را در آموزش های آینده توضیح خواهیم داد .
بعد از بسته شدن تگ head تگ body را باز می نماییم . تمامی ظاهر وب سایت که ما آن ها مشاهده می نماییم در این تگ قرار می گیرد .
<html> <head> <meta> <title> ... </title> </head> <body> </body> </html>
قطعه کدی که در بالا مشاهده می کنید ساختار کلی یک سند HTML می باشد . حال یک نوت پد ( ترجیحا نوت پد ++ ) را باز نموده و کد زیر را در آن یادداشت نمایید . ( لطفا کپی نکنید برای یادگیری بهتر خودتان )
نکته : برای اینکه نوت پد++ ما از زبان فارسی در این فایل پشتیبانی کند کافیست نوار Encoding را باز نموده و آن را بر روی Encode in UTF-8 قرار دهیم .
سپس آن را با نام Index.html ذخیره نمایید سپس یک فایل برای شما ساخته خواهد شد که آن فایل HTML شما خواهد بود .
نکته : لطفا در حال حاضر از نرم افزار های کد نویسی استفاده نکنید زیرا می خواهم نحوه ی درست کد نوشتن را به شما دوستان عزیز آموزش دهم تا در آینده با هر برنامه ای بتوانید کد مورد نظر خود را بنویسید .
جدیدترین نسخه ی زبان HTML می باشد ، برای اینکه متوجه شویم کد های ما با HTML 5 نوشته شده اند یا با نسخه های دیگر کافیست به خط اول کد نگاه کنیم . اگر قطعه کد زیر را در آن دیدم متوجه می شویم که کد مورد نظر ما با HTML 5 نوشته شده است .
<!DOCTYPE html>
برای ایجاد یک سند CSS کافیست نوت پد ( ترجیحا از نوت پد ++ استفاده نمایید ) خود را باز نموده سپس کلید alt+ctrl+s را فشار دهید تا یک پنجره برای شما باز شود سپس گزینه ی save as type را بر روی All Files قرار دهید و در کادر File Name متن Style.css را قرار دهید تا یک فایل CSS ایجاد شود .
نرم فزار های زیادی برای کد نویسی وجود دادر اما معمولا طراحان برای کد نویسی زبان های CSS و HTML از دو نرم افزار Dreamweaver ( دریم ویور ) و Atom ( اتم ) استفاده می کنند .
دریم ویور یک نرم‌افزار طراحی وب سایت می باشد که توسط شرکت ادوبی ( شرکت تولید کننده ی نرم افزار محبوب فتوشاپ ) تولید شده است . این نرم افزار بهترین نرم افزار برای نوشتن کد های CSS و HTML می باشد ، اما کار با آن نیاز به مقداری آموزش دارد.
نرم افزار Atom یک ویرایشگر متن و ویرایشگر کد ( کد ادیتور ) می باشد که در لینوکس، ویندوز و مک قابل استفاده است. این نرم افزار توسط GITHUB توسعه داده می شود .
کار با نرم افزار اتم بسیار ساده می باشد در ضمن این نرم افزار برای تمامی افراد در سراسر دنیا رایگان می باشد .
سخن نویسنده : من به شخصه از نرم افزار اتم استفاده می کنم چون کار با آن راحت می باشد و به شما عزیزان نیز توصیه می کنیم از این نرم افزار استفاده کنید .
در صورتی که از ویرایشگر کد Atom استفاده می کنید کافیست نرم افزار را باز کرده سپس از کلید ctrl+n استفاده نمایید تا یک فایل جدید ایجاد شود سپس کلید ctrl+s را فشار دهید تا یک پنجره برای شما باز شود سپس گزینه ی save as type را بر روی All Files قرار دهید و در کادر File Name متن Style.css را قرار دهید تا یک فایل CSS ایجاد شود .
همچنین برای ایجاد یک سند HTML کافیست از کلید ctrl+n استفاده نمایید تا یک فایل جدید ایجاد شود سپس کد HTML:5 را نوشته و کلید TAB را بزنید تا یک فایل HTML ایجاد شود سپس کلید ctrl+s را فشار دهید تا یک پنجره برای شما باز شود سپس گزینه ی save as type را بر روی All Files قرار دهید و در کادر File Name متن Index.html را قرار دهید تا یک فایل HTML ایجاد شود .
