آموزش نحوه ایجاد فایل HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه ایجاد فایل HTML با من همراه باشید.

آموزش نحوه ایجاد فایل HTML

Free-Learn

آموزش نحوه ایجاد فایل HTML

دوستان محترم فری لرن ، در این بخش از آموزش های قدم به قدم زبان HTML میخواهیم نحوه ایجاد یا ساخت یک فایل HTML و یا بطور کلی نحوه ساخت صفحه HTML را یاد بگیریم.

همونطور که میدونید نه فقط برای ساخت یک صفحه ی وب HTML بلکه ما برای ایجاد اکثر فایل ها از جمله (فایل های آفیس پاورپوینت و.. فایل های برنامه نویسی سی شارپ و.. ، فایل های طراحی صفحات وب PHP,CSS و..) نیاز به نرم افزارهای مخصوص داریم.

در نتیجه HTML هم همانند دیگر زبان های طراحی وب و یا برنامه نویسی و.. به یک نرم افزار نیاز داره که بتوانیم از طریق آن به نوشتن و اجرای دستورات HTML‌ بپردازیم.

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

یعنی در واقع ما میتونیم بدون اینکه از اینترنت استفاده کنیم یا بدون اینکه به اینترنت وصل باشیم دستورات HTML را نوشته و خیلی راحت بروی سیستممان (لپ تاپ،کامپیوتر و..) اجرا نماییم.

حتی لازم نیست از نرم افزار خاص یا خیلی حرفه ای و یا نرم افزارهای گرون قیمت برای نوشتن و ایجاد یک فایل HTML استفاده کنیم چونکه حتی با نرم افزار NotePad موجود در ویندوز هم میشه به راحتی دستورات HTML را نوشت و اجرا کرد.

Free-Learn

ادیتور دستورات HTML

همونطور که میدانید امروزه نرم افزارهای خیلی زیاد و با امکانات فراوانی وجود دارد برای نوشتن دستورات HTML ، برای مثال یکی از این نرم افزارها Adobe Dreamweaver می باشد که یکی از بهترین و حرفه ای ترین نرم افزارهای طراحی صفحات وب می باشد.

ولی خب شاید من دسترسی به همچین نرم افزارهایی نداشته باشم، اونوقت باید چکار کرد؟! همونطور که گفتم خوشبختانه زبان HTML خیلی کم خرجه و خیلی راحت ما میتونیم با ساده ترین نرم افزار که در ادامه معرفی میکنم یک صفحه HTML را طراحی کرد.

اگر در اینترنت یک جستجوی ساده بزنید با عنوان (ادیتور HTML) نرم افزارهای مختلفی به شما پیشنهاد میشه ولی بنده در ادامه میخوام یکی از کم خرج ترین و ساده ترین روش رو به شما دوستان محترم پیشنهاد کنم اونم استفاده از نرم افزار NotePad موجود در سیستم عامل های ویندوز و یا نرم افزار TextEdit موجود در سیستم عامل های (Mac) است.

من پیشنهاد میکنم از نرم افزار کم حجم ولی تاحدودی حرفه ای ++Notepad استفاده نمایید.

برای دانلود آخرین نسخه این نرم افزار لطفا اینجا کلیک نمایید و به سایت رسمی سازنده تشریف ببرید و آخرین نسخه نرم افزار رو دانلود نمایید.

همچنین میتوانید در صورت تمایل از ادیتور آنلاین فری لرن برای کدنویسی زبان های HTML , CSS و JS استفاده نمایید. [ مشاهده ادیتور ]

Free-Learn

آموزش نحوه ایجاد فایل HTML در نرم افزار Notepad ویندوز

پس لطفا اگر از ویندوز استفاده مینمایید نرم افزار NotePad ویندوز را اجرا نمایید و اگر از سیستم عامل Mac استفاده مینمایید نرم افزار TextEdit را اجرا نمایید.

بعد از اینکه نرم افزار مورد نظرمون رو را اجرا کردیم، نوبت میرسه به نوشتن دستورات HTML، چون فعلن ما چیزی از HTML یاد نگرفتیم پس نگران نباشید شما برای اینکه فقط نحوه ایجاد فایل HTML را ببینید لطفا نرم افزار NotePad رو که باز کردید دستورات زیر را در آن کپی و در نهایت پیست (Paste) نمایید.

(چه بهتر که دستورات زیر رو خودتون با دست خودتون تایپ کنید)

آموزش نحوه ایجاد فایل HTML

خب حالا نوبت میرسه به ذخیره فایل HTML مون، در نرم افزار NotePad از منوی File بروی گزینه Save as کلیک نمایید،حال در پنجره ای که باز میشه باید محل ذخیره فایل + نام فایل HTML مون رو مشخص و در نهایت بروی گزینه Save‌ کلیک نماییم.

آموزش نحوه ایجاد فایل HTML

توجه داشته باشید که باید بصورت دستی پس از نام فایل یک نقطه (.) گذاشته سپس پسوند یا فرمت فایل را به دو صورت html. یا htm. وارد نمایید و همچنین در قسمت Encoding باید گزینه UTF-8 را انتخاب نمایید.

آموزش نحوه ایجاد فایل HTML
برای بزرگنمایی لطفا بروی تصویر کلیک نمایید

در آخرین مرحله میرسیم به اجرای فایل HTML مون، چون پسوند فایل مون html‌ یا htm می باشد سیستم بطور خودکار اونو از طریق یک مرورگر اجرا خواهد کرد ولی اگر برای شما چنین نشد لطفا بروی فایل کلیک راست نموده سپس در قسمت Open with یک مرورگر اینترنتی را انتخاب نمایید.

آموزش نحوه ایجاد فایل HTML

Free-Learn

آموزش نحوه ایجاد فایل HTML در نرم افزار ++Notepad

خب دوستان در ادامه ی آموزش نحوه ایجاد فایل HTML میخوام به شما نحوه ایجاد یک فایل html در درون نرم افزار notepad پلاس پلاس را آموزش بدم. لطفا در ادامه و تا پایان با من همراه باشید.

ابتدا این نرم افزار رایگان را از سایت های معتبر فارسی زبان دانلود نمایید و یا میتوانید با کلیک بروی این لینک آخرین نسخه این نرم افزار را از سایت رسمی آن دریافت نمایید.

نرم افزار را نصب و سپس اجرا نمایید، وقتی نرم افزار را اجرا میکنید بصورت پیش فرض خودش یک صفحه خالی به شما نمایش میده و شما فقط باید شروع کنید به کدنویسی زبانی که مدنظرتونه.

ولی خب اگه بخواید یک فایل جدید در این نرم افزار ایجاد نمایید، همانند تصویر زیر بروی شکل مشخص شده کلیک نمایید، همچنین میتوانید از منوی File بروی گزینه New کلیک نمایید.

برای مشاهده در اندازه اصلی کلیک نمایید

حال دستورات مورد نظرتون رو درون این نرم افزار قرار دهید. ( تایپ کنید یا کپی / پیست نمایید ) ، سپس برای ذخیره فایل مورد نظر، همانند تصویر زیر بروی شکل مشخص شده کلیک نمایید، یا میتوانید از منوی File بروی گزینه Save یا Save As کلیک نمایید.

برای مشاهده در اندازه اصلی کلیک نمایید

در پنجره ای که به شما نمایش داده می شود، باید فرمت فایل مون رو مشخص کنیم، یعنی باید مشخص کنیم که این فایل یک فایل HTML می باشد، پس همانند تصویر زیر در قسمت Save as type نوع فایل را انتخاب نمایید.

برای مشاهده در اندازه اصلی کلیک نمایید

وقتی شما فرمت فایل را انتخاب نمایید بصورت خودکار نرم افزار خودش پسوند html. رو به نام فایل تون اضافه میکنه، و دیگه تمام کافیه برای ذخیره نهایی بروی دکمه Save کلیک نمایید.

اگر پس از انتخاب فرمت فایل ، پسوند فایل مورد نظر نمایش داده نشد ، یعنی اگر index.html نشد، شما باید بصورت دستی خودتون حتما html. را اضافه نمایید در غیراینصورت فایل شما یک فایل html نخواهد بود.

برای مشاهده در اندازه اصلی کلیک نمایید

Free-Learn

نمایش عجیب غریب متن ها در نرم افزار ++Notepad + رفع مشکل

اگر پس از اینکه فایل تون رو با نرم افزار ++Notepad ایجاد کردید، و از متن های فارسی در درون فایل استفاده کرده اید ولی در خروجی و در مرورگر متن های فارسی شما بصورت ( فونت ناشناس / عجیب / نامشخص ) نمایش داده می شوند باید برای رفع این مشکل از تکه کد زیر استفاده نمایید.

تکه کد زیر را در بین تگ head صفحه وبتون قرار دهید :

مثال : نحوه استفاده از تکه کد بالا در یک صفحه html :

امتحان کنید

خب اینم از آموزش نحوه ایجاد فایل HTML ، تبریک میگم بابت اینکه تونستید اولین صفحه HTML تون رو ایجاد نمایید، همانطور که مشاهده کردید خیلی راحت و کم خرج تونستیم یک فایل HTML ایجاد نماییم.لطفا در قسمت های بعدی همچنان با من همراه باشید تا موارد بیشتری از HTML را یاد بگیرید.

Free-Learn

Advertising
دریافت PDF یا پرینت این مطلب