ویرایشگرهای HTML

خب حال میایم سراغ اینکه در چه محیطی میتوانیم کدهای HTML رو بنویسیم .

نوشتن HTML با استفاده از NotePad یا  TextEdit

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

با این حال، برای یادگیری HTML، یک ویرایشگر متن ساده مانند Notepad (PC) یا TextEdit (Mac) را توصیه میکنیم.

ما معتقدیم که استفاده از یک ویرایشگر متن ساده راه خوبی برای یادگیری HTML است .

چهار مرحله زیر را دنبال کنید تا اولین صفحه وب خود را با Notepad یا TextEdit ایجاد کنید.

قدم اول: (pc) NotePad رو باز کنید .

در  windows 8 و نسخه های  بعد:

صفحه اصلی (start screen) را باز کنید (نماد پنجره در پایین سمت چپ روی صفحه خودnotepad . را تایپ کنید .

در windows 7 یا نسخه های قدیمی تر:

آدرس زیر را باز کنید :

Start > Programs > Accessories > Notepad

 

قدم اول در (mac):  

از این آدرس textedit را باز کنید :

Finder > Applications > TextEdit  

همچنین تنظیمات زیر را تغییر دهید تا برنامه بتواند به درستی فایل ها را ذخیره کند :

وارد قسمت Preferences > Format >  شوید و “Plain Text”  را انتخاب کنید.

سپس در زیر “Open and Save” ،

جعبه ای را که میگوید :

Display HTML files as HTML code instead of formatted text”  ” تیک بزنید .

سپس یک سند جدید برای قرار دادن کد باز کنید .

 قدم دوم :  چند خط کد  HTML  را بنویسید.

کد  HTML زیر را در NotePad بنویسید و یا آن را کپی کنید .

 

<!DOCTYPE html>
<html>
<body>

<h1>  اولین عنوان من </h1>

<p>اولین پاراگراف من</p>

</body>
</html>

به این صورت

editor

قدم سوم :صفحه  HTML  را ذخیره نمایید.

فایل رو بر روی کامپیوتر خود ذخیره نمایید . گزینه file  در بالا سمت راست notepad را انتخاب نمایید و گزینه Save as  رو  انتخاب کنید .

فایل را با اسم “index.HTML” ذخیره کرده و encoding  را بر روی  UTF-8 که برای صفحات  HTML  ترجیح داده میشوند را  مطابق شکل زیر تنظیم کنید .

 

 

utf-8

 

 

شما میتوانید پسوند فایلتون رو .htm و یا .HTML قرار دهید هیچ فرقی ندارد  و کاملا به خود شما بستگی دارد

 

قدم چهارم:صفحه  HTMLکه ساختید رو در  browser  مشاهده کنید .

فایل HTML ذخیره شده را در مرورگر مورد علاقه خود باز کنید (روی فایل دوبار کلیک کنید یا راست کلیک کنید)

و «Open with» را انتخاب کنید .

نتیجه بسیار شبیه به عکس زیر خواهد بود.

output

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *