آموزش رایگان HTML و CSS از مقدماتی تا پیشرفته

برای ساخت فایل html می توانید از روش های مختلف استفاده کنید. هماطور که میبینید کل صفحه بین دو تگ html است و الباقی المان ها که به صورت تگ های دوتایی هستند در میان این دو تگ وجود دارند. دقیقا شبیه به تگ های head و body که خودشان در ساختار بقیه ی تگ هارا در بر میگیرند. HTML یک زبان علامتگذاری استاندارد برای ساختن صفحات وب است.

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

آموزش HTML با اجرای آنلاین توضیح همه تگ ها کامل جامع – پی استور

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

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

آموزش گام به گام زبان HTML به زبان ساده – فصل اول

خب اینم از آموزش نحوه ایجاد فایل HTML ، تبریک میگم بابت اینکه تونستید اولین صفحه HTML تون رو ایجاد نمایید، لطفا در قسمت های بعدی همچنان با من همراه باشید تا موارد بیشتری از زبان HTML رو یاد بگیرید. اگر پس از انتخاب فرمت فایل ، پسوند فایل مورد نظر نمایش داده نشد ، یعنی اگر index.html نشد، شما باید بصورت دستی خودتون حتما html. را اضافه نمایید در غیراینصورت فایل شما یک فایل html نخواهد بود. ( بازم میگم سعی کنید تایپ کنید ) ، سپس برای ذخیره فایل مورد نظر، همانند تصویر زیر بروی شکل مشخص شده کلیک نمایید، یا هم میتونید از منوی File بروی گزینه Save یا Save As کلیک نمایید فرقی نمیکنه. فرقی نمیکنه درکل شما از کدوم نرم افزار استفاده میکنید، ولی خب ما کاری به اون نرم افزارهای حرفه ای نداریم، فرض میگیریم هیچ نرم افزاری نداریم و میخوایم روی سیستم خودمون با استفاده از برنامه نوت پد ( NotePad ) یه فایل HTML ایجاد کنیم. حتی لازم نیست از نرم افزار خاص یا خیلی حرفه ای برای نوشتن و ایجاد یک فایل HTML استفاده کنیم چونکه حتی با یه نرم افزار ساده NotePad ( که بصورت پیشفرض داخل ویندوز وجود داره ) هم میشه به راحتی دستورات HTML را نوشت و اجرا کرد.

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

شما با notepad ویندوز می توانید یک فایل html یا یک قالب سایت بسازید کافی است با دستورات html و css آشنا باشید. پسوند فایل مورد نظر همانطور که مشاهده می‌کنید، html می‌باشد. توجه کنید که حالت encoding برای فایل مورد نظر بر روی UTF-8 باشد. این فرمت برای اجرای فایل‌های HTML فرمت شناخته شده و مناسب تری نسبت به سایر فرمت‌های موجود می‌باشد. برای کسب اطلاعات بیشتر در رابطه با فرمت‌های مختلفی که برای encoding وجود دارد به fileformat.info مراجعه نمایید.

در مقاله بعد به بررسی تگ‌های مورد استفاده در HTML که عامل ساخت محتواهای مختلف برای یک فایل HTML می‌باشند، می‌پردازیم. در واقع این فرمت شیوه‌ای جهت تبدیل استانداردهای موجود برای کاراکترهای مختلف جهت نمایش می‌باشد. برای نوشتن دستورات HTML می‌توانید در یک نوت پد و یا با استفاده از IDE های موجود (محیط برنامه‌نویسی) همچون phpStorm، pycharm، Visual Studio Code و بسیاری از محیط‌ های برنامه‌نویسی استفاده کنید. شوخ طبع، منطقی و پرتلاش، متخصص عکاسی و فیلمبرداری حرفه ای، علاقه مند به مباحث طراحی وب و برنامه نویسی.

مرحله 1 در ویندوز : نوت پد را در ویندوز باز کنید.

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

پاراگراف های اچ تی ام ال

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

در این تگ اطلاعاتی همچون نام وعکس سایت در هنگام باز شدن در مرورگر، فایل‌های افزودنی همچون css و جاوا اسکریپت و یا کتابخانه‌هایی همچون jquery و یا فریمورک bootstrap تمامی در داخل این تگ تعریف می‌شوند. پس از آنکه تمامی تگ‌ها و اطلاعات مورد نیاز در داخل تگ تعریف شد، با استفاده از تگ آن را می‌بندیم. ولی خب اگه بخواید یک فایل جدید در این نرم افزار ایجاد نمایید، همانند تصویر زیر بروی شکل مشخص شده کلیک نمایید، همچنین میتوانید از منوی File بروی گزینه New کلیک نمایید. ابتدا این نرم افزار رایگان را از سایت های معتبر فارسی زبان دانلود نمایید و یا میتوانید با کلیک بروی این لینک آخرین نسخه این نرم افزار را از سایت رسمی آن دریافت نمایید. بعد از اینکه نرم افزار مورد نظرمون رو را اجرا کردیم، نوبت میرسه به نوشتن دستورات HTML، چون فعلن ما چیزی از HTML یاد نگرفتیم پس نگران نباشید ما فعلا فقط میخوایم یه صفحه درست کنیم.

آموزش برنامه نویسی HTML – قسمت ۲

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

بعد از نصب ویژوال استودیو کد، ابتدا آن را باز کنید و در قسمت بالا سمت چپ روی گزینه File کلیک کنید. اگر قبلا فایل HTML را با نوت پد ساخته باشید، می‌توانید روی گزینه Open File کلیک کنید و کدهای HTML را ویرایش کنید. اما اگر اولین بار می‌خواهید یک فایل HTML ایجاد کنید، باید بعد از File روی گزینه New Text File کلیک کنید. اگر یادتان باشد تک تک کدهای ساختار اصلی فایل HTML را برایتان توضیح … هم گفتیم ، ما در این دوره آموزشی از ادیتور ++notepad استفاده میکنیم. آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی … NotePad++ 6.9.2 … چون دیدن مطالب شما واقعا برای من مفید بوده با اینکه هیچ سر رشته ای از کدنویسی نداشتم. من پیشنهاد می‌کنم برای آموزش طراحی سایت با html از این نرم افزار استفاده کنید، با اینکه بقیه نرم افزار ها هم برای آموزش ساخت سایت با html قابل استفاده هستند ولی این نرم افزار رو به خاطر تجربه ای که داشتم پیشنهاد می‌کنم.

چرا باید آموزش html css را بصورت پروژه محور یادبگیرم؟

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

• توجه کنید که حالت encoding برای فایل مورد نظر بر روی UTF-8 باشد.
{
• هدف مرور گر های وب خواندن اچ تی ام ال و سپس نمایش آنهاست.
|}
• به غیر این موارد پیش‌نیاز به خصوصی برای شروع کار با HTML وجود ندارد.
{
• خاصیت ها یا همان اتریبیوت ها برای ارائه کردناطلاعات اضافه درباره المان های اچ تی ام ال هستند.
|}{
• برای این کار می توانید نوت پد را باز کرده و کد زیر را در آن قرار داده و با پسوند html ذخیره کنید.
|}
• هماطور که میبینید کل صفحه بین دو تگ html است و الباقی المان ها که به صورت تگ های دوتایی هستند در میان این دو تگ وجود دارند.

معرفی دوره آموزش HTML و CSS:

شاید قبلا کار با HTML را شروع کرده باشید اما این روزها بهترین راه … کدنویسی PHP را می توان با ابزاری ساده مثل Notepad ویندوز شروع کرد. تبدیل notepad از txt به html کدستان,انجمن کدستان,کدنویسی,انجمن پشتیبانی,فروم,رزبلاگ,آموزش کدنویسی,درخواست کد. آموزش HTML در 37 درس به صورت کامل همراه با مثال های فراوان، از مقدماتی HTML تا … برای مشاهده نتیجه کد بالا روی دکمه "خودتان امتحان کنید" کلیک کنید.

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

هدف مرور گر های وب خواندن اچ تی ام ال و سپس نمایش آنهاست. این بیانیه، پرونده را یک پرونده (فایل) اچ تی ام ال پنج تعریف میکند. همونطور که میدونید امروزه نرم افزارهای خیلی زیاد و با امکانات فراوانی وجود دارد برای نوشتن دستورات HTML ، برای مثال یکی از این نرم افزارها Visual Studio Code هستش و کلی نرم افزار دیگه.

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

برای یادگیری html در شروع کار به ابزار خاصی احتیاج ندارد صرفا یک ادیتور کد که بتوانید کدهای html را داخلش بنویسید و یک مرورگر که خروجی کار را نمایش دهید همین. ضمن اینکه در در این آموزش هم در ابتدای کار سند html را با notepad ساده ویندوز ایجاد میکنیم و بعد با نصب notepad++ ادامه کدنویسی مان را انجام میدهیم و کار با این نرم افزار ساده را هم براحتی یادمیگیریم. شما همین الان میتوانید در کامپیوتر شخصی تان آموزش html css را شروع کنید.

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

آموزش رایگان HTML – CSS افق وب

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

ده نکته مهم برای بالا بردن امنیت سایت های وردپرس

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

اول html را یادبگیرم یا html5 ؟

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

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

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

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

با سلام خدمت تمامی علاقمندان به آموزش طراحی سایت با HTML ، در جلسه قبل با تاریخچه پیدایش HTML آشنا شدیم در این جلسه از  آموزش HTML قصد داریم شما را با نرم افزار های مورد نیاز برای شروع کدنویسی با زبان HTML آشنا کنیم. سلام عرض می کنم خدمت دوستان عزیزدر جلسه قبل، مقدماتی را راجع به HTML5 خدمت شما ارائه کردیم. در این درس قصد داریم نحوه نوشتن کدهای HTML از طریق text editor ها را به شما آموزش دهیم.برای این کار، وارد وب سایت w3schools.com می شویم و از آموزش اچ تی ام ال، منوی سمت چپ، HTML Editors را انتخاب می کنیم. HTML در سال 1980 توسط جمعی از فیزیکدانان به نام‌ تیم برنرز-لی ارائه شد. HTML یک زبان نشانه گذاری است که برای ایجاد ساختار یا قالب صفحات وب استفاده میشود. اما CSS یک زبان استایل دهی می باشد که برای زیبایی یا صفحه آرایی وب‌سايت مورد استفاده قرار می گیرد.

جلسه ۳ – معرفی و استفاده از تگ چند تگ html و نحوه ارتباط با css برای استایل نویسی

در طی این آموزش ها می توانید با نرم افزار Notepad ویندوز کدها را نوشته و سپس ذخیره نمایید. این نرم افزار دارای محدودیت است اما کاملا به شما اجازه می دهد کد HTML، که واقعا … از Notepad یا Notepadd ++ برای هر برنامه نویسی HTML یا CSS خواهید بود. HTML در فرم المان های HTML که شامل تگ های نشانه گذاری است, نوشته شده است.

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

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

ادیتور Notepad++ یک ادیتور رایگان برای طراحی وب سایت با html هست که برای کاربران ویندوز ساخته شده است. البته کاربران لینوکس با استفاده از نرم افزار Wine می‌تونن به این نرم افزار دسترسی داشته باشند. این ادیتور یک نرم افزار رایگان است و همچنین می‌توانید به کد های متن باز آن از طریق گیت هاب دسترسی داشته باشید.

یک عاشق تکنولوژی و همیشه در حال یادگیری ​​که امیدوار است با قلم خود (صفحه کلید) کاری خارق العاده انجام دهد. عاشق موسیقی و بازی است، فوتبال را زندگی می کند و همیشه برای یک فنجان چای ایرانی آماده است. اکنون می توانید به پوشه ای که فایل کد را در آن ذخیره کرده اید بروید و آن را با هر مرورگری که از HTML 5 پشتیبانی می کند باز کنید. در زیر نوع فایل ، All file را انتخاب کرده و به اسم فایل را با عنوان mar.html یا هر چیز دیگری ذخیره کنید . در مورد هر یک از این المان ها در بخش های بعدی بیشتر آشنا می شوید. پیشنهاد می کنیم همه چیزهایی را که در اینجا یاد می گیرید تست کنید.

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

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

در جلسه ششم آموزش html و css با مفهوم تگ های اینلایل لول (inline level) و بلاک لول (block level) و خصوصیات و تفاوت های آن آشنا میشوید. معرفی و استفاده از تگ a بهمراه خصوصیت های آن برای ایجاد لینک گذاری را بطور کامل یادمیگیرید و در آخر هم با معرفی تگ img نحوه نمایش تصاویر مختلف را (با جزئیات آن مثل کنترل ابعاد، استایل های مورد نیاز در بخش css و…) در صفحه وب یادمیگیرید. یکی از اصول طراحی وب این است که طراح ما در همه مرورگرها نمایش یکسانی داشته باشد و ما برای رسیدن به این مهم با استفاده از کدهای css reset استایل های پیشفرضی که مرورگرهای مختلف روی المان های صفحه اعمال میکنند را خنثی میکنیم. ضمن اینکه در همین جلسه نحوه کامنت گذاری در css و یکسری نکات کاربردی در استفاده از float و height بیان میکنیم تا با جزئیات آنها بصورت کامل آشنا شوید. زبان اچ تی ام ال در یادگیری آسان است ودر این دوره یادگیری به مثال های ساده ای از ورودی های مورد استفاده ای که هر نویسنده ی وبسایت میتواند استفاده کند یاد میکنیم.

نرم افزار ویرایشگر Visual Studio Code (پیشنهادی)

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

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