ویرایشگرها
محتویات
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 بنویسید یا کپی کنید.
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <h1>My First Heading</h1>
6
7 <p>My first paragraph.</p>
8
9 </body>
10 </html>
مرحله ۳: ذخیره کردن صفحه HTML
فایل را در رایانه خود ذخیره کنید. در منوی Notepad ،File > Save as را انتخاب کنید.
نام فایل را “index.htm” گذاشته و encoding را به UTF-8 تنظیم کنید (که encoding رایج برای فایل‌های HTML است).
مرحله ۴: نمایش صفحه HTML در مرورگر خود
فایل ذخیره شده HTML را در مرورگر دلخواه خود باز کنید (روی فایل دابل کلیک کنید، یا راست کلیک - و “Open with” را انتخاب کنید).
نتیجه تقریباً اینگونه خواهد بود:
ویرایشگر آنلاین WIKICOD
با ویرایشگر رایگان آنلاین ما، شما می‌توانید کد HTML را ویرایش کرده و نتیجه را در مرورگر خود مشاهده کنید.
این یک ابزار کامل برای زمانی است که می‌خواهید کد را به سرعت تست کنید. همچنین دارای کد رنگی و توانایی ذخیره کد و به اشتراک گذاشتن آن با دیگران است:
مثال
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Page Title</title>
5 </head>
6 <body>
7
8 <h1>This is a Heading</h1>
9 <p>This is a paragraph.</p>
10
11 </body>
12 </html>
برروی کلید «مشاهدهٔ نتیجه» کلیک کنید تا ببینید چگونه عمل می‌کند.
منابع آموزشی