100% کامل شده تا
به‌روزرسانی شده در: ۲۲ روز پیش

استفاده از ویرایشگرهای ساده در HTML

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


یک ویرایشگر متن ساده، تمام چیزی است که شما برای یادگیری HTML نیاز دارید.


HTML را با استفاده از Notepad یا TextEditبنویسید

صفحات وب را می‌توان با استفاده از ویرایشگرهای حرفه ای HTML ایجاد کرد و تغییر داد.[۱]

با این حال، ما برای یادگیری HTML یک ویرایشگر ساده مانند Notepad (PC) یا TextEdit (MAC) را پیشنهاد می‌کنیم.

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

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


مرحله ۱: باز کردن (PC) Notepad

ویندوز ۸ یا بالاتر:

  • صفحهٔ Start را باز کنید (علامت پنجره در پایین سمت چپ صفحه نمایش شماست). Notepad را تایپ کنید.

ویندوز ۷ یا قدیمی‌تر:

  • Start > Programs > Accessories > Notpad را باز کنید

مرحله ۱: باز کردن (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>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>





مرحله ۳: ذخیره کردن صفحه HTML

فایل را در رایانه خود ذخیره کنید. در منوی Notepad ،File > Save as را انتخاب کنید.

نام فایل را “index.htm” گذاشته و encoding را به UTF-8 تنظیم کنید (که encoding رایج برای فایل‌های HTML است).

می‌توانید از .htm یا .html برای پسوند فایل استفاده کنید. تفاوتی ندارد ، انتخاب با خودتان است.

مرحله ۴: نمایش صفحه HTML در مرورگر خود

فایل ذخیره شده HTML را در مرورگر دلخواه خود باز کنید (روی فایل دابل کلیک کنید، یا راست کلیک - و “Open with” را انتخاب کنید).

نتیجه تقریباً اینگونه خواهد بود:


ویرایشگر آنلاین WIKICOD

با ویرایشگر رایگان آنلاین ما، شما می‌توانید کد HTML را ویرایش کرده و نتیجه را در مرورگر خود مشاهده کنید.

این یک ابزار کامل برای زمانی است که می‌خواهید کد را به سرعت تست کنید. همچنین دارای کد رنگی و توانایی ذخیره کد و به اشتراک گذاشتن آن با دیگران است:

مثال

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

مثال

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Responsive demo.svg


برروی کلید «مشاهدهٔ نتیجه» کلیک کنید تا ببینید چگونه عمل می‌کند.




منابع آموزشی