بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML عناصر فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 عناصر جدید HTML5 عناصر معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

ویرایشگران HTML



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

با استفاده از برنامه های استاندارد Notepad می توانید کد HTML را بنویسید Windows) و TextEdit (در MacOS). اما اکنون تعداد بسیار زیادی انواع ویرایشگرهای متن حرفه ای که می توانید با آنها کد HTML بنویسید وجود دارد . اگرچه برای یادگیری زبان HTML توصیه می شود ابتدا کد را بنویسید فقط با استفاده از ویرایشگرهای متن ساده - دفترچه یادداشت استاندارد Notepad . پس از یادگیری نحوه نوشتن کد HTML ساده ، سپس به موارد دیگر ویراستاران حرفه ای بروید

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

مرحله 1: Notepad (در ویندوز) را باز کنید

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

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

ویندوز 7 یا قبل از آن :

روی منوی شروع کلیک کنید > برنامه ها > استاندارد > Notepad

مرحله 1. TextEdit (Mac) را باز کنید

برنامه Finder > برنامه ها را باز کنید > TextEdit.

برخی تنظیمات را نیز تغییر دهید تا برنامه بتواند به درستی فایل ها را ذخیره کند. در منو گزینه های > قالب بندی انتخاب کنید "متن ساده".

سپس در بخش "باز کردن و ذخیره" ، کادر "نمایش فایلهای HTML به عنوان کد HTML را به جای" "علامت بزنید متن غنی ".

سپس یک سند جدید برای قرار دادن کد باز کنید.

مرحله 2. کد HTML را بنویسید

این کد HTML را در Notepad بازنویسی یا کپی کنید:

<!DOCTYPE html>
<html>
<body>

<h1>اولین سرتیتر من</h1>

<p>اولین پاراگراف من</p>

</body>
</html>

Notepad


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

پرونده را در رایانه خود ذخیره کنید. لطفا انتخاب کنید ذخیره پرونده > نوشتن نام فایل در منو Notepad

یک نام به پرونده بدهید"index.htm"و رمزگذاری را تنظیم کنیدUTF-8 (که بهترین رمزگذاری برای پرونده های HTML است).

View in Browser

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


مرحله 4. صفحه HTML تولید شده را در یک مرورگر باز کرده و مشاهده کنید

فایل HTML ذخیره شده را در مرورگر باز کنید (روی پرونده دوبار کلیک کنید یا راست کلیک کنید - و انتخاب کنید "برای باز کردن با").

نتیجه چیزی شبیه به این خواهد بود:

نمای مرورگر


ویرایشگر متن آنلاین Farsiw3.ir

با ویرایشگر آنلاین رایگان در Farsiw3.ir ، می توانید ویرایش کنید HTML کد و نتیجه را در مرورگر خود مشاهده کنید. این ابزار ایده آل برای آزمایش سریع است کد ویرایشگر همچنین دارای کدگذاری رنگی و قابلیت ذخیره و به اشتراک گذاری است :

مثال

<!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>

<h1>این عنوان است</h1>
<p>این یک بنداست.</p>

</body>
</html>
خودتان آزمایش کنید »

روی دکمه "خودتان آزمایش کنید"کلیک کنید ببینم چطور کار میکنه


ویرایشگر کد آنلاین رایگان

ویرایشگرهای کد آنلاین مختلفی در اینترنت وجود دارند که می توانید از آنها استفاده کنید (رایگان هستند). به عنوان مثال ، جدا از ویرایشگر آنلاین سایتfarsiw3.ir، خدماتی از قبیل:jsfiddle.net, codepen.io, codesandbox.io, thimble.mozilla.org, jsbin.com, rapprogtrain.com, liveweave.com و غیره.


چه ویرایشگرهای نرم افزاری توسط برنامه نویسان وب حرفه ای استفاده می شود ؟

توسعه دهندگان حرفه ای وب از چه ویرایشگرهای متنی استفاده می کنند؟

  • ویرایشگر ++ Notepad
  • ویرایشگر Brackets
  • ویرایشگر Sublime Text 3
  • IDE Atom
  • IDE Visual Studio Code
  • IDE WebStorm / PHPStorm
  • IDE Dreamweaver
  • IDE NetBeans

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


ویرایشگر ++Notepad

ویرایشگر کد Notepad++

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


ویرایشگر Brackets

Редактор кода Brackets

ویرایشگر کد HTML دوم - brackets - نیز ویرایشگر رایگان از منبع باز برای توسعه دهندگان وب. brackets کار با آن متمرکز شده است HTML ، CSS و JavaScript . همین فناوری ها در آن نهفته است مبتنی بر خود ویرایشگر ، که بین پلتفرم آن را تضمین می کند ، یعنی سازگاری سیستم عامل سیستم های Mac ، Windows و Linux. بسیاری از برنامه های افزودنی عملکرد بسیار خوبی به این ویرایشگر می دهند. (پلاگین ها) که ابزارهای لازم برای ربات های دارای کد را اضافه می کند. brackets را از وب سایت رسمی بارگیری کنید .

ویژگی ها

  • ویژگی Live Preview یک پنجره جدید Chrome را نشان می دهد که صفحه فعلی را نشان می دهد که نه تنها هنگام تغییر پرونده ، بلکه به نوشتن نیاز به یک تجدید دستی ندارد.
  • JSLint: پس از صرفه جویی با کد جاوا اسکریپت شما کار می کند و نتایج آن به صورت پانلی در زیر پنجره اصلی ویرایش نمایش داده می شود.
  • از آنجایی که توسط همان افرادی که فتوشاپ می سازند ایجاد شده است ، جای تعجب نیست که ویژگی های براکت ها بر طراحی و ادغام خوب با محصولات Adobe تأکید دارند . دو ویژگی برجسته عبارتند Live Preview و Code Hints.
  • ویژگی های اضافی مانند ادغام خط فرمان ، انتخاب چندین کد و پیدا کردن سریع سریع و سریع ، به نکات برجسته ویرایشگر کد Brackets اضافه می کند.

ویرایشگر SublimeText

Редактор кода SublimeText3

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

ویژگی ها

    • پشتیبانی از HTML بهتر ، از جمله تکمیل ویژگی ، تورفتگی خودکار و بستن برچسب خودکار
    • هنگامی که از ویژگی Command Palette استفاده می کنید ، می توانید خیلی سریعتر از آنکه مجبور شوید به جستجوی منوها برای آن بروید ، راه خود را به هر فرمانی پیدا کرده و حرکت کنید.
    • در Sublime Text یک منو وجود دارد که به تمام عملکردهای "Goto" در این ویرایشگر متن اختصاص دارد
    • Sublime Text نوشتن کد سریع و آسان است و وقتی می دانید چه کاری انجام می دهید ، به مسیر خود حرکت کنید.

ویرایشگر (IDE) اتم

Редактор кода Atom

ویرایشگر بعدی کد HTML ، که به عنوان یک محیط توسعه یکپارچه نیز شناخته می شود ، Atom . ویرایشگر Atom از تیم GitHub ابزارها را ارائه می دهد برای ویرایش کد بین پلت فرم ، دارای یک سیستم تکمیل خودکار هوشمند است و بسیار دیگر. موارد اضافه شده زیادی به این ویرایشگر وجود دارد. محیط توسعه بر روی پلت فرم Atom ساخته شده است کد ویژوال استودیو از مایکروسافت و نوکلید از فیس بوک .

اگرچه برای مبتدیان هنوز هم دشوار است ، بنابراین برای افراد باتجربه توصیه می شود کاربران Atom Editor می توانید بارگیری رایگان از سایت رسمی انجام دهند

لطفا توجه داشته باشید که ویرایشگر Atom فقط به زبان انگلیسی یک رابط رسمی دارد. ولی یک پلاگین مربوطه وجود دارد که می توانید با آن زبانهای مختلف رابط را نصب کنید شامل فارسی یا زبان های دیگر. این افزونه Atom-i18n نام دارد. نحوه نصب این می توانید ویرایشگر Atom را به آن وصل کنید و آن را فارسی کنید ، می توانید در مقاله چگونه ویرایشگر کد Atom / Atom؟ را در وب سایت ما فارسی کنید.

البته می توانید ویرایشگرهای HTML دیگر را در اینترنت پیدا کنید. اما همه آنها بسیار شبیه به موارد ذکر شده در بالا هستند. هرکسی می تواند با توجه به سلیقه و درجه خود ویرایشگر خود را انتخاب کند

ویژگی ها

  • ویرایش کراس پلت فرم - Atom در سیستم عامل های مختلف کار می کند. می توانید از آن در OS-X ، Windows یا Linux استفاده کنید.
  • مدیر بسته ساخته شده - بسته های جدید را جستجو و نصب کنید یا شروع به ایجاد موارد دلخواه خود کنید - همه از درون Atom.
  • اتمام خودکار هوشمند - Atom به شما کمک می کند سریعتر کد را با یک خودکار کامل و انعطاف پذیر بنویسید.
  • Atom یک نوع خاص از Chromium است (Chromium پروژه مرورگر وب منبع باز است که از آن Google Chrome کد منبع خود را طراحی شده برای کار به عنوان ویرایشگر متن و نه به عنوان مرورگر وب.

IDE - محیط توسعه یکپارچه

علاوه بر ویرایشگرهای متنی ، که برای نوشتن کد HTML / CSS استفاده می شود ، توسعه دهندگان حرفه ای وب نیز از IDE - (مخفف محیط توسعه یکپارچه) - محیط های توسعه یکپارچه برای به حداکثر رساندن بهره وری برنامه نویس با ارائه ابزارهای توسعه مرتبط از رابط های مشابه مانند یک برنامه که در آن کل روند توسعه اتفاق می افتد و برنامه های لازم را فراهم می کند کارکرد ساخته شده اند IDE ها به افزایش بهره وری توسعه دهنده و سرعت بخشیدن به روند توسعه و نوشتن کد کمک می کنند.

محبوب ترین IDE ها در بین توسعه دهندگان وب در سال 2020 مانند:

همچنین یک شاخه کامل از IDE های مختلف از شرکت Jetbrains وجود دارد ، هر کدام برای توسعه در زبان های برنامه نویسی خاص

برای توسعه وب ، معمولاً استفاده می شود:

همه این IDE ها و سایر IDE ها را می توان از سایت رسمی دانلود کرد.

برخی از این IDE ها رایگان و برخی دیگر پولی هستند. اگر چه IDE WebStorm ، PHPStorm ، Pycharm از شرکت Jetbrains: است و سایر موارد را دارند بسیار یک دوره طولانی کار رایگان (آزمایشی) - 30 روز ، و برای دانشجویان و معلمان می توانید اینها را IDE به مدت 2 سال رایگان برای اهداف مطالعه در اختیار داشت. همچنین در اینترنت می توانید کلیدهای فعال سازی PHPStorm یا سریال های مختلف (کرک ، فعال کننده ها) به این برنامه ها را دانلود کرد

توجه داشته باشید. اگر قادر به دسترسی به www.jetbrains.com و نسخه مورد نیاز برنامه نیستید ، کار را با استفاده از هر سرویس VPN انجام دهید(پلاگین VPN در مرورگر). این سایت ممکن است در کشور شما مسدود! باشد


کدام ویرایشگر کد یا IDE را باید انتخاب کنید؟

اگر شما یک توسعه دهنده وب مبتدی هستید یا فقط اصول ساخت و کدگذاری وب سایت را یاد می گیرید ، سپس توصیه می شود ابتدا از ساده ترین ویرایشگرهای کد مانند استفاده کنید ++ Notepad (برای دانش آموزان) ، SublimeText3 ، Brackets (برای دانش آموزان) ، و بعد، با تسلط بر اصول نوشتن کد ، می توانید به استفاده از حرفه ای تر و پیچیده تر بروید که در تنظیمات ، اما موثرتر در استفاده ، محیط های توسعه یکپارچه - IDE. معمولا اکثر جهانی و آسانترین برای یادگیری IDE (بعد از ویراستاران) برای مبتدیان توسعه دهندگان وب VS Code شود. بستگی به نوع کار و میزان تسلط شما بر روی برنامه و کد نویسی دارد

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






این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir