ویرایشگر
از آنجایی که اچ تی ام ال یک زبان برنامه نویسی نیست و یک زبان نشانه گذاری است، میتوان آن را تقریبا با هر ویرایشگر متنی نوشت. در این آموزش برای آنکه مباحث را ساده نگه داریم، از ادیتور پیش فرض سیستم عامل های دسکتاپ استفاده میکنیم.
در ویندوز از Notepad و در مک از TextEdit استفاده میکنیم.
اگرچه برای ساخت صفحات وب حرفه ای از این ویرایشگر ها استفاده نمیشود، اما برای یادگیزی زبان اچ تی ام ال میتوان از آنها بهره برد. برای ساخت صفحات حرفه ای وب با زبان های اچ تی ام ال، سی اس اس و جاوا اسکریپت، از Webstorm، VSCode، PHPStorm و … استفاده میشود.
بعد یادگیری موارد پایه، ما برای درست کردن مثال هایی از اچ تی ام ال، سی اس اس و جاوا اسکریپت از یک ادیتور متن حرفه ای استفاده خواهیم کرد. اما در حال حاضر روند ساخت یک صفحه اچ تی ام ال ساده با نوت پد در ویندوز را آموزش میدهیم.
باز کردن نوت پد
ویندوز 7 و قبل تر: Start > Programs > Accessories > Notepad
ویندوز 8 به بالا: استارت را باز کنید > عبارت notepad را جستجو کنید.
اولین صفحه وب / اچ تی ام ال
گد های زیر را که در آموزش قبل بررسی کردیم، در این فایل بنویسید(بنویسید تا دستتان راه بیوفتد) یا کپی کنید.
<!DOCTYPE html>
<html>
<head>
<title>نام صفحه</title>
</head>
<body>
<h1>اولین سر فصل</h1>
<p>اولین پاراگراف</p>
</body>
</html>
در نوت پد یا تکست ادیت باید چیزی مانند تصویر زیر داشته باشید.
ذخیره کردن صفحه اچ تی ام ال
بعد از اینکه کد ها را در نوت پد کپی کردید یا نوشتید، باید آن فایل را با یک فرمت مشخص یعنی html یا htm ذخیره کنید تا مرورگر شما با آن فایل به عنوان یک صفحه نشانه گذاری شده توسط این زبان، برخورد کند.
ذخیره کردن فایل با فرمت html یا htm در ویندوز
مطمعا شوید که پنجره نوت پد در ویندوز انتخاب شده باشد. برای باز کردن پنجره ذخیره دو روش وجود دارد:
1- فشردن همزمان کلید های CTRL + SHIFT + S
2- File > Save as
بعد از باز شدن پنجره ذخیره، اسم فایل(File name) را به “index.html” و انکودینگ(Encoding) را بر روی UTF-8 بگذارید.
در واقع، شما با تغییر نام و پسوند فایل به Index.html که index نام فایل و html فرمت فایل است، فایل شما به عنوان یک صفحه نشانه گذاری شده توسط اچ تی ام ال، در کامپیوتر ذخیره شد و مرورگر با آن فایل به عنوان یک صفحه وب برخورد خواهد کرد
باز کردن صفحه اچ تی ام ال با مرورگر
بعد از ذخیره شدن فایل با فرمت HTML شما میتوانید به راحتی آن را با مروگر دلخواه خودتان باز کنید و آن را مشاهده کنید.
برای باز کردن فایل کافی است که یا بر روی فایل ذخیره شده دابل کلیک کنید، یا اینکه با کلیک راست کردن بر روی آن و بردن نشانگر موس روی آپشن Open With، مرورگر دلخواه خود را انتخاب کرده و با آن فایل را مشاهده کنید.
ویرایش صفحه اچ تی ام ساخته شده
روی فایل اچ تی ام ال خود کلیک راست کنید و بر روی آپشن Open With بروید.
1-اگر نوت پد در بین گذینه های نمایش داده شده موجود بود: با کلیک بر روی آن و ایجاد تغییرات دلخواه در فایل و ذخیره کردن آن با فشردن کلید های CTRL + S، شما صفحه اچ تی ام ال را ویرایش کرده اید
2-اگر نوت پد در بین گذینه های نمایش داده شده موجود نبود: در بین گذینه های نمایش داده شده روی Choose another app کلیک کنید و از انجا نوت پد را پیدا کرده و آن را انتخاب کنید و روی Just once کلیک کنید. بعد از آن با ایجاد تغییرات و ذخیره کردن فایل با فشردن همزمان CTRL + S شما فایل اچ تی ام ال خود را ویرایش کرده اید.
نکته: اگر صفحه مرورگر باز و در حال نمایش فایل اچ تی ام ال ذخیره شده بود، با فشردن کلید F5 بر روی کیبورد، میتوانید آن را رفرش (Refresh) کنید و صفحه ویرایش شده را مشاهده کنید.