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

فایل را ذخیره می کنیم و به پوشه ای که فایل را ذخیره کرده بودیم، می رویم و فایل را از طریق یک مرورگر باز می کنیم. سیستم عامل من ویندوز است؛ توضیحاتی که ارائه شد برای دوستانی است که از سیستم عامل مکینتاش استفاده می کنند. همچنین ما دو کد را برای این منظور در اختیار شما قرار داده ایم ، کد اول کمی حرفه ای تر و زیباتر نسبت به کد دوم می باشد.

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

… شما می توانید با استفاده از Notepad یا TextEdit HTML آموزش html و css را فرا بگیرید. خیلی از دوستان فکر می کنند که برای نوشتن کد های HTML و کلا برای طراحی وب باید حتما نرم افزار … ما در طول آموزش از نرم افزار Notepad++ استفاده می کنیم . ادیتور Brackets یکی از ادیتور های خیلی بهینه برای آموزش کدنویسی سایت می‌باشد.

رو به نام فایل تون اضافه میکنه، و دیگه تمام کافیه برای ذخیره نهایی بروی دکمه Save کلیک نمایید. همانطور که در ابتدای مقاله بیان کردیم، نرم‌افزارهای زیادی برای ساخت فایل‌های HTML وجود دارند. اما بهترین نرم‌افزار برای ساخت یک فایل HTML، نرم‌افزار VSCode یا ویژوال استودیو کد است. این نرم‌افزار به‌صورت رایگان و متن باز (Open Source) توسط مایکروسافت ارائه شده است که می‌توانید آن را دانلود کنید. قبل از اینکه آموزش ساخت فایل HTML را بررسی کنیم، اول باید بدانیم HTML چیست؟ HTML مخفف کلمات «Hyper Text Markup Language» به معنی «زبان نشانه گذاری ابرمتن» است.

در اصل باید گفت یادگیری HTML اولین قدم برای یادگیری طراحی وب است که باید با دقت این قدم را بردارید. این تگ شامل تمامی اطلاعات نمایش داده در داخل سایت می‌باشد. شما اگر متنی داشته باشید، فرم ثبت‌نام داشته باشید ویا ویدئویی و یا هر نوع اطلاعاتی را قصد داشته باشید در داخل سایت برای مخاطب نمایش دهید، در داخل این تگ قرار می‎گیرد.

توضیح کدهای بالا

بدین معنا که برای تصویر کد مربوط به تمایش تصویر و جدول و ... کدهای Html مربوط به هر یک را باید نوشت و مرورگر با رسیدن به این کد ها و تگ ها ، المنت های مرتبط با آن را نمایش می دهد. بعد از اینکه روی گزینه New Text File کلیک کردید، یک فایل Text ایجاد شده است که باید آن را به فایل HTML تبدیل کنیم تا در مرورگر قابل اجرا باشد. برای این کار در سمت راست قسمت پایین صفحه روی گزینه Plain Text کلیک کنید تا یک جعبه در قسمت بالا باز شود و در آن دنبال زبان HTML بگردید و روی آن کلیک کنید.

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

شما میتوانید از دو پسوند  htm و html استفاده کنید که بستگی به نویسنده دارد. واژه ی تعیین داک تایپ گواهی نوع پرونده است و به مرورگر کمک میکند تا صفحه های وب را صحیح نمایش دهد. را مشاهده نمی‌کنید در قسمت My Computer به قسمت View بروید و تیک گزینه File name extensions را بزنید. در نوشته “چگونه يک برچسب html بنويسيم“، شما ياد گرفتيد که چطور يک برچسب بنويسيد. سرصفحه(Head) و بدنه(Body) هم خودشان يک برچسب هستند، که از يک قسمت ابتدايي و انتهايي و محتواي دروني تشکيل شده است.

آموزش HTML – شروع کدنویسی

خب دوستان در ادامه ی آموزش نحوه ایجاد فایل HTML میخوام به شما نحوه ایجاد یک فایل html در درون نرم افزار notepad پلاس پلاس را آموزش بدم. مثل بیشتر پروژه های اجتماعی و متن باز دیگه، این نرم افزار هم از پلاگین های مختلفی پشتیبانی می‌کنه و میتونه انتخاب خوبی به عنوان اولین ادیتور شما در آموزش طراحی وب سایت با html باشه. هدف ما در این دوره آموزشی این است که به شما مقدمات اولین تکنولوژی دنیای طراحی وبسایت را یاد بدهیم. یادگیری HTML مهمترین و اساسی‌ترین قدمی‌ست که برای یادگیری تکنولوژی‌های حوزه وب نیاز است تا آن را یاد بگیرید. دلیل اینکه این دوره را نیز به صورت رایگان منتشر کرده‌ایم این است که همه شانس ورود به دنیای جذاب و پر درآمد طراحی وبسایت را داشته باشند. این دوره برای افرادی که به حوزه برنامه‌نویسی و طراحی وب علاقه‌مند هستند مناسب بوده و برای تبدیل شدن به یک توسعه دهنده حرفه‌ای صفحات وب (فرانت اند) به شما کمک میکند.

نوشتن HTML توسط Notepad یا TextEdit

با اين توضيحات فکر کنم که ساختار کلي يک سند HTML را درک کرديد، پس با يک مثال در ادامه اين موضوع براي شما بيشتر ملموس خواهد شد. HTML به عنوان یک زبان نشانه‌گذاری شناخته می‌شود که به شما اجازه می‌دهد ساختار یک صفحه وب را به شکلی که مد نظر دارید ایجاد کنید. ما در دوره آموزش HTML سعی کرده‌ایم خیلی ساده و سریع و رایگان این زبان نشان‌گذاری را به شکل کامل به شما آموزش دهیم.

{
• ادیتور Brackets یکی از ادیتور های خیلی بهینه برای آموزش کدنویسی سایت می‌باشد.
|}
• برای دانلود فایل html کافی است کد زیر را در یک فایل با پسوند html قرار داده و اجرا کنید.
• اگر به دنبال کد بازی HTML هستید تا Snake Game را به راحتی در دفترچه یادداشت ایجاد کنید ، در صفحه مناسبی قرار دارید.
{
• ( بازم میگم سعی کنید تایپ کنید ) ، سپس برای ذخیره فایل مورد نظر، همانند تصویر زیر بروی شکل مشخص شده کلیک نمایید، یا هم میتونید از منوی File بروی گزینه Save یا Save As کلیک نمایید فرقی نمیکنه.
|}
• جالب است بدانید، میزان سطح دانش مخاطبین دوره مهم نیست و هیچ محدودیتی برای یادگیری وجود ندارد.
{
• ذخیره نام، ایمیل و وبسایت من در مرورگر برای زمانی که دوباره دیدگاهی می‌نویسم.
|}

ساخت يک سند ( html) چگونه است؟

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

اگر به هر دلیلی بخواهید کدهای خود را ویرایش کنید، روی فایل HTML راست کلیک کنید و گزینه Open with را بزنید و سپس Notepad را انتخاب کنید. با زدن کلیدهای ترکیبی CTRL + S نیز می‌توانید عملیات ذخیره شدن را انجام دهید. بخاطر همین کار کردن با نوت پد ویندوز، خسته کننده است و ابزار مناسب و حرفه‌ای برای کد نویسی نیست. اما خروجی کار VSCode و Notepad در مرورگر یکسان است و فرقی نمی‌کند با کدام نرم‌افزار برای ساخت صفحه HTML استفاده کرده‌اید.

اکنون در پایین گزینه Open and Save یک گزینه به نام Display HTML files as HTML code instead of formatted text وجود دارد که باید تیک آن را بزنید و ذخیره کنید. اگر از لپتاپ یا سیستم‌عامل مک استفاده می‌کنید، برای ساخت صفحه HTML نیاز به برنامه TextEdit دارید. برای این کار، ابتدا روی Finder کلیک کنید، سپس روی Applications بروید و در آنجا روی TextEdit کلیک کنید.

کتاب یا فیلم آموزشی؟ بهترین آموزش html کدام است؟

تا الان نسخه‌های متفاوتی از HTML منشر شد، که در زیر لیست این ورژن‌ها را می‌توانید مشاهده کنید. هر کسی باید یاد بگیره که چه‌طور کد بزنه چرا که برنامه‌نویسی به شما یاد می‌ده که چه‌طور فکر کنید. برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید. در رابطه با فرمت UTF-8، به دلیل استفاده مکرر آن در فایل‌های html توضیح کوتاهی در اینجا می‌دهیم. یک کاراکتر در UTF-8 می تواند از ۱ تا ۴ بایت باشد، این فرمت می‌تواند نمایانگر هر کاراکتر در استاندارد UNI-Code باشد. برای ایجاد یک پاراگراف است و به یک تگ باز و بسته منتهی میشود.

دوره های کاربردی

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

HTML5 نسخه جدید تر و سازمان یافته تر html است که در سال 1997 ساخته شده است. Html5 با هدف پشتیبانی از جدیدترین فناوری های چندرسانی ای و همچنین ایجاد ساختار مشخص برای صفحات وب ایجاد شد که ساختار آن براحتی توسط مرورگرهای وب و همجنین خزنده های گوگل قابل فهم باشد. بطور کلی و اساسی تفاوتی بین html5 و html وجود ندارد و صرفا یک سری تگ های جدید و معنا دار در html5 اضافه شده که ساختار صفحه وب را سازمان یافته تر میکند. ضمن اینکه برای آموزش زبان های برنامه نویسی سمت سرور هم الزما نیاز به هاست ندارید و میتوانید با استفاده از نرم افزار های شبیه ساز سرور مثل ومپ و زمپ در یادگیری و تمرین را در کامپیوتر شخصی خودتان شروع کنید.

جلسه اول : ساختار و اصول نوشتن HTML

این ادیتور که توسط شرکت Adobe ساخته شده، رایگان است و می‌توانید از افزونه های آن بدون هیچ محدودیتی استفاده کنید. در زیر ۵ نرم افزار ویرایشگر مطرح را که می‌توانید از آن‌ها برای کدنویسی سایت استفاده کنید را به شما معرفی می‌کنیم. حالا که کمی با موتور رندر گیری و مشخصات مورد نیاز برای نرم افزار های کد نویسی در HTML آشنا شدیم، حالا زمان آن است که با بهترین نرم افزار های کد نویسی HTML در سال 2020 آشنا شویم. نرم افزار نوت پد را باز می کنیم و می بینیم که کد ما بدنه فایل HTML را داراست. و در بخش body که درواقع بدنه فایل HTML را تشکیل میدهد یک تگ h1 داریم که برای header ها و در واقع عنوان ها استفاده می شود و سایز بزرگ تری دارد.

مرحله 3 : صفحه اچ تی ام ال را ذخیره کنید

هر پرونده اچ تی ام ال با شروع میشود و در آخر با پایان میابد. چهار مرحله زیر را برای نوشتن یک صفحه وب با نوت پد یا تکست ادیت دنبال کنید. هدف مرور گر های وب خواندن اچ تی ام ال و سپس نمایش آنهاست. این بیانیه، پرونده را یک پرونده (فایل) اچ تی ام ال پنج تعریف میکند. همونطور که میدونید امروزه نرم افزارهای خیلی زیاد و با امکانات فراوانی وجود دارد برای نوشتن دستورات HTML ، برای مثال یکی از این نرم افزارها Visual Studio Code هستش و کلی نرم افزار دیگه. آموزش رایگان HTML – CSS | آموزش کدنویسی HTML-CSS از مقدماتی تا پیشرفته … تو دوره HTML-CSS مقدماتی از ادیتور Bracket و Notepad++ استفاده کردیم.

برنامه نویسان فرانت اند، توجهی به بهینه سازی سورس ندارند و این یکی از مهمترین بخش‌های برنامه‌نویسی و طراحی صفحات وب است. این دوره شما را با چالش‌‌های موجود در حوزه برنامه‌نویسی و طراحی وب آشنا کرده و کمک میکند این چالش‌ها برطرف کنید. در مرحله دوم باید فایل را با یک ویرایشگرکد باز کنید و کدهای html بنویسید. میتوانید با notepadd ساده ویندوز هم اینکار را انجام دهیم اما پیشنهاد میکنم از یک ویرایشگر مخصوص استفاده کنید تا روند کار برایتان لذتبخش و راحت تر باشد.

سپس کدهای HTML را ویرایش کنید و دکمه‌های CTRL + S را برای ذخیره فایل HTML بزنید. اما در این قسمت یاد می‌گیریم که چگونه با ویژوال استودیو کد یک صفحه HTML بسازیم؟ پس در ادامه با ما همراه باشید. اما اگر بخواهیم یک نرم‌افزار ساده برای ایجاد فایل HTML را معرفی کنیم، بدون شک نوت پد پیش‌فرض ویندوز، قابلیت ایجاد فایل‌های HTML را داراست اما به قدرتمندی VsCode نیست. و تگ‌های HTML به‌صورت رنگی نیستند و به‌صورت خودکار پیشنهاد نمی‌شوند و باید همه‌ی تگ‌ها را خودتان بنویسید.

شما می توانید از نرم افزارهای مختلف مثل notepad++ یا Komodo Edit یا phpstorm و نرم افزار یا برنامه های دیگر که می توانید از سایت های دانلودی جستجو و دانلود کنید. Html و html5 از هم مجزا نیستند در واقع شما باید یک سری تگ هایی را بشناسید و در طراحی سایت از آن استفاده کنید. حدود 110 تگ در html وجود دارد که حدود 30 تای آن جدید هستند یعنی در HTML5 عرضه شدند. بنابراین شما هم html و هم html5 را باید یادبگیرید البته تمام تگ های موجود را نیاز نیست حفظ باشید بلکه فقط تعداد محدودی از آنها را استفاده میکنید. در صورتی که علاقه‌مندید تا از محیط های برنامه‌نویسی آنلاین استفاده کنید، سایت code pen یکی از بهترین سایت‌ها در این زمینه می‌باشد.

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

این تگ‌ها در کنار هم قرار می‌گیرند و یک صفحه HTML را می‌سازند. آیا تا به حال هنگام فارسی نویسی در کدهای html برای طراحی صفحات وب با مشکل مواجه شده اید؟ … طریقه فارسی نویسی در ویرایشگر متن notepad++. ویرایشگر Atom یک ادیتور HTML هست که از سال ۲۰۱۴ عرضه شده است و می‌توانید برای آموزش طراحی سایت html از آن استفاده کنید. Atom رایگان و متن باز  است و توسط تیم Github توسعه داده می‌شود. این ادیتور قابل اضافه کردن افزونه های مختلف را در خود دارد که می‌توانید با استفاده از آن‌ها امکانات بیشتری را در محیط نرم افزار داشته باشید. در جلسه ششم آموزش html و css با مفهوم تگ های اینلایل لول (inline level) و بلاک لول (block level) و خصوصیات و تفاوت های آن آشنا میشوید.

چطور با Notepad یک برنامه بنویسیم? – گروه آموزشی پرتقال

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

تگ div در HTML

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

درخواست مشاوره رایگان

HTML ضروری‌‌ترین تکنولوژی برای طراحی صفحات وب بوده و هیچ وبسایتی بدون استفاده از HTML ایجاد نخواهد شد. اگر تصمیم دارید که به یک توسعه دهنده Front-End و طراح وبسایت تبدیل شوید باید HTML را به شکل کامل یاد بگیرید. ما در دوره آموزش HTML سعی کرده‌ایم به شکل کامل و کاربردی و البته رایگان این زبان نشانه‌گذاری را به شما آموزش دهیم. یادگیری HTML بسیار ساده‌ است به شکلی که با کمی تلاش شما می‌توانید کمتر از یک یا دو هفته به شکل کامل با این زبان نشانه‌گذاری آشنا شوید و مسیر یادگیری طراحی وب خود را ادامه دهید. دوره آموزش HTML مربوط به افرادی می‌شود که تصمیم دارند طراحی وب یاد بگیرند.

اما اگر می خواهید به خوبی آن را فرا بگیرید، می توانید در دوره کوتاه آموزش الگوریتم و فلوچارت آکادمی کدیاد ثبت نام کرده تا مبانی برنامه نویسی را یاد بگیرید. کاربرد اصلی HTML این است، که با استفاده از تگ‌ها(Tag) قالب اصلی صفحات وب را پیاده سازی میکند. در اصل اسکلت اولیه صفحات وب با استفاده از تگ‌های HTML صورت میگیرد. هر کدام از این تگ‌ها کاربردهای خاص خود را دارند و باعث نمایش دقیق عناصر در صفحات وب می شوند. برای ساخت یک وبسایت حرفه‌ای باید از زبان‌های برنامه نویسی مختلفی استفاده كرد، اما برای همه مرورگرها HTML قابل مفهوم‌تر است، باید عناصر و کدها در HTML تعریف شود. در این آموزش گام به گام HTML قصد داریم زبان اچ تی ام ال را برای مبتدیان شرح دهیم و آن ها را تا ساخت اولین صفحات وب خود راهنمایی کنیم.

برای نوشتن کدهای HTML ، تنها یک ادیتور متن مانند Notepad ویندوز و یا نرم افزار های مرتبط با HTML همچون فرانت پیج یا ویژوال استودیو نیاز است . خب به پایان این جلسه آموزش اچ تی ام ال رسیدیم در جلسه بعد با ساختار یک صفحه HTML آشنا خواهیم شد. اولین قدم در آموزش HTML این است که بدانیم تعریف این زبان چیست؟ HTML یک زبان برنامه‌نویسی نیست؛ بلکه یک زبان نشانه‌گذاری است که ساختار محتوای شما را تعریف می‌کند. HTML شامل مجموعه‌ای از عناصر ( elements ) می‌شود که با استفاده از آن شما می‌توانید ساختار یک صفحه وب را مشخص می‌کنید تا در قدم بعدی بتوانید به آن ظاهر مناسبی به آن دهید. این دوره برای افرادی که به طراحی صفحات وب علاقه‌مند هستند ارائه شده است.

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

وب‌سایت آموزش برنامه نویسی دولوپر شو در 6ام تیر ماه سال 1401 تاسیس شد. هدف ما این است که برنامه نویسی را با استفاده از مقالات و ویدئوهای آموزشی برنامه نویسی در سطح استاندارد جهانی برای شما فراهم کنیم. بعد از قرار دادن کدهای HTML، روی گزینه File کلیک کنید و با زدن روی گزینه Save، در پنجره جدید مسیر مورد نظر را انتخاب کنید و نام فایل و پسوند آن را بنویسید و دوباره روی دکمه Save کلیک کنید تا فایل HTML شما ذخیره شود. همانطور که در بالا گفتیم، خروجی و نمایش کدها در مرورگر ربطی به نرم‌افزار مورد استفاده شده ندارد و فقط بخاطر راحتی کد نویسی، از VSCode استفاده می‌شود.

در دوره آموزش رایگان HTML و CSS تمامی مباحث از مقدماتی تا پیشرفته به صورت تخصصی و حرفه‌ای توضیح داده می شود. بعد از آن، همه مواردی که برای HTML و CSS مهم است را به طور جداگانه و کامل شرح می دهیم. در کنار توضیحات تمرین‌ها، پروژه هایی داده می شود که باعث آشنایی شما با چالش های برنامه نویسی وب می شود. شما با notepad ویندوز می توانید یک فایل html یا یک قالب سایت بسازید کافی است با دستورات html و css آشنا باشید.

سپس همانند نوت پد نیاز است تا فایل مورد نظر را در فرمت html ذخیره کنید. اگر کمی با دنیای برنامه نویسی سمت ویندوز آشنا باشید حتما اسم VisualStudio به گوشتون خورده. نسخه ای متفاوت از Visual Studio که اوپن سورس و رایگان هست و برای آموزش طراحی صفحات وب با html پیشنهاد میشه، نرم افزار Visual Studio Code هست.

مثلا من نرم افزار Visual Studio Code رو بیشتر از Atom می پسندم، یا باز مثلا ++NotePad رو از بقیه نرم افزارها بیشتر میپسندم ، پس این یه چیز سلیقه ای هست و شماهم هرکدوم دوست داشتید میتونید استفاده کنید. همچنین برخی از تنظیمات برگزیده را باید تغییر دهید تا برنامه بتواند فایل‌ها را به درستی ذخیره کند. برای این کار روی Preferences کلیک کنید و سپس روی Format بزنید و Plain Text را انتخاب کنید. هر فایلی که ایجاد می‌شود در حقیقت باید یک پسوند داشته باشد.

پیشنهاد ما در شروع کار استفاده از ویرایشگر notepadd++ است که بسیار کم حجم و ساده است notepad++ را از اینجا میتوانید بر اساس نسخه سیستم عامل تان دانلود کنید. با استفاده از کلید میانبر crtl+s و همچین از طریق تب file و انتخاب گزینه save می‌توانید فایل مورد نظر را در فرمت html ذخیره کنید. پس از ذخیرة فایل مورد نظر و اجرای آن، می‌توانید کد نوشته مورد نظر را در داخل مرورگر مشاهده کنید. در نتیجه HTML هم همانند دیگر زبان های طراحی وب و یا برنامه نویسی و.. به یک نرم افزار نیاز داره که بتوانیم از طریق آن به نوشتن و اجرای دستورات HTML‌ بپردازیم.

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

یک فایل HTML با نام “snakegame.html” یا هر نام دیگری که می خواهید ایجاد کنید. اگر به دنبال کد بازی HTML هستید تا Snake Game را به راحتی در دفترچه یادداشت ایجاد کنید ، در صفحه مناسبی قرار دارید. در حقیقت ، ساخت بازی مار  در Notepad فقط با کد HTML بسیار آسان است. فایل html با چه برنامه ای باز می شود؟ همان طور که در بالا گفتیم فایل های html را می توانید با مرورگر باز کنید.