САЙТ НАХОДИТСЯ В РАЗРАБОТКЕ

HTML Учебник

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 Head HTML Макеты HTML Адаптивность HTML Компьютерный код HTML Семантика HTML Объект HTML Символы HTML Emojis HTML Кодировка HTML URL кодирование HTML XHTML HTML Гид по стилю

HTML Формы

HTML Формы HTML Элементы формы HTML Тип ввода HTML Атрибуты ввода

HTML 5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Переход

HTML Графика

HTML Canvas HTML SVG

HTML Media

HTML Медиа HTML Видео HTML Аудио HTML Плагины HTML YouTube

HTML API

HTML Геолокация HTML Drag/Drop HTML Web хранилище HTML Web работник HTML SSE

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Резюме HTML Доступность

HTML Справочник

HTML Список тегов HTML Атрибуты HTML Глоб. атрибуты HTML События HTML Цвета HTML Canvas HTML Аудио/Видео HTML Набор символов HTML DOCTYPE HTML URL Кодирование HTML Коды языков HTML Коды стран HTTP Сообщений HTTP Метод PX в EM Конвертер Горячие клавиши
Баннер ТОП

HTML Редакторы


Писать HTML используя Блокнот или TextEdit

Веб-страницы могут быть созданы и изменены с помощью профессиональных редакторов HTML.

Однако для изучения HTML мы рекомендуем простой текстовый редактор, такой как Notepad (ПК) или TextEdit (Mac).

Мы считаем, что использование простого текстового редактора является хорошим способом изучения HTML.

Выполните следующие шаги, чтобы создать свою первую веб-страницу с помощью Блокнота или TextEdit.


Шаг 1: Открыть Блокнот (на Windows)

Windows 8 или более поздней версии:

Откройте начальное меню (символ окна слева внизу на экране). Выберите программу Блокнот.

Windows 7 или более ранней версии:

Нажмите меню Пуск > Программы > Стандартные > Блокнот


Шаг 1. Откройте TextEdit (Mac)

Откройте Finder > Программы > TextEdit.

Также измените некоторые настройки, чтобы программа могла правильно сохранять файлы. В меню Параметры > Формат выберите "Обычный текст".

Потом в разделе "Открыть и сохранить" установите флажок "Показывать HTML-файлы как HTML-код вместо форматированного текста".

Потом откройте новый документ, чтобы разместить код.


Шаг 2. Напишите HTML код

Перепишите или скопируйте данный HTML-код в Блокнот:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Notepad


В контенте

Шаг 3: Сохраните HTML страницу

Сохраните файл на вашем компьютере. Выберите Файл > Сохранить как в меню Блокнота.

Дайте имя файлу "index.htm" и установите кодировку UTF-8 (которая является лучшей кодировкой для HTML файлов).

View in Browser

Вы можете использовать расширение файла .htm или .html. Особой разницы нет, выбор зависит от вас.


Шаг 4. Откройте и посмотрите созданную HTML-страницу в браузере

Откройте сохраненный файл HTML в браузере (дважды щелкните файл или щелкните правой кнопкой мыши - и выберите "Открыть с помощью").

Результат будет выглядеть примерно так:

View in Browser


Онлайн редактор

С нашим бесплатным онлайн-редактором вы можете редактировать HTML-код и просматривать результаты в своем браузере.

Это идеальный инструмент для быстрого тестирования кода. Он также имеет цветовое кодирование:

Пример

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Попробуйте сами »

Нажмите на кнопку "Попробуйте сами" чтобы увидеть, как это работает.


В контенте

Бесплатные онлайн-редакторы кода

В сети существует множество различных онлайн-редакторов кода, которые вы также можете использовать (бесплатно). Например, кроме онлайн-редактора от PROGtutorial, есть такие сервисы, как: 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 - Блокнота. Но сейчас, конечно же, никто с помощью Блокнота HTML-код уже не пишет. Для этого существуют другие более удобные редакторы кода с подсветкой синтаксиса и разными дополнительными функциями, которые облегчают написание кода.


Редактор Notepad++

Редактор кода Notepad++

Первым HTML-редактором, который раньше использовали после стандартного Блокнота Windows часто становился Notepad ++. Это свободный текстовый редактор с открытым исходным кодом для Windows с подсветкой синтаксиса большого количества языков программирования и разметки. Поддерживает открытие более 100 форматов. Базовая функциональность программы может быть расширена как за счет плагинов, так и сторонних модулей, таких как компиляторы и препроцессоры. Именно с помощью Notepad ++ можно начинать писать свои первые веб-страницы любым новичкам. Программа небольшая, довольно удобная, имеет русский и украинский интерфейс, её можно скачать бесплатно с официального сайта. Есть портативный вариант (portable) программы, который не требует установки. Её достаточно скачать и распаковать в любую директорию на жестком диске вашего компьютера и пользоваться.


Редактор Brackets

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

Второй редактор HTML-кода - Brackets - также бесплатный редактор из открытым кодом для веб-разработчиков. Brackets ориентирован на работу с HTML, CSS и JavaScript. Эти же технологии лежат в основе самого редактора, что обеспечивает его кроссплатформенность, т.е. совместимость с операционными системами Mac, Windows и Linux. Большую функциональность этому редактору дают множество расширений (плагинов), что добавляет необходимые инструменты для роботы с кодом. Скачать Brackets можно с официального сайта.


Редактор SublimeText

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

Ещё один чудесный редактор HTML-кода - это SublimeText3. Программа условно-бесплатна. Её можно скачать с официального сайта (или отсюда) и пользоваться абсолютно бесплатно. Единственное неудобство в этом случае - это периодическое появление сообщения о необходимости купить программу. Хотя на просторах Интернета можно найти ключи активации для SublimeText3. Также на официальном сайте SublimeText3 есть только англоязычная версия программы. Но в Интернете легко можно найти и скачать пакеты с переводом на русский или украинский языки и, придерживаясь рекомендаций, самостоятельно их установить в SublimeText3. В целом этот HTML редактор довольно быстрый, простой и понятный в использовании, но всё-таки рекомендуется именно для более опытных пользователей и верстальщиков сайтов, потому что для расширения функциональности в SublimeText3 необходимо дополнительно доустановить некоторые дополнения - плагины, которых существует огромное количество. Но именно плагины и дают все те удобства для этого редактора HTML-кода.


Редактор Atom

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

Следующий редактор HTML-кода, и он же интегрированная среда разработки - это Atom. Редактор Атом от команды GitHub предоставляет средства для крос-платформенного редактирования кода, имеет интеллектуальную систему автодополнения ввода и многое другое. Есть множество дополнений и в этого редактора. На платформе Atom построены среда разработки Visual Studio Code от компании Microsoft и Nuclide от Facebook.

Хотя для новичков он будет всё-таки довольно сложным, поэтому рекомендуется для более опытных пользователей. Редактор Atom можно скачать бесплатно с официального сайта.

В Интернете можно, конечно же, найти и другие HTML-редакторы. Но все они, как правило, очень похожи на вышеперечисленные. Каждый может выбрать себе редактор по своему вкусу и степени сложности для освоения.


IDE - Интегрированная среда разработки

Кроме текстовых редакторов, которые используются для написания HTML/CSS - кода, профессиональные веб-разработчики используют также IDE - (сокращенно от англ. Integrated development environment) - Интегрированную среду разработки. Интегрованные среды разработки созданы для того, чтобы максимизировать продуктивность программиста, предоставив ему связанные инструменты разработки из похожими интерфейсами как одну программу, в которой происходит весь процесс разработки и которая предоставляет необходимые функции. IDE помагают увеличить продуктивность разработчика и ускорить процесс разработки и написания кода.

Наиболее популярными IDE среди веб-разработчиков по состоянию на 2020 год являются такие:

Также существует целая ветка различных IDE от компании Jetbrains, каждая из которых предназначена для разработки на определённых языках программирования.

Для веб-разработки обычно используются:

  • WebStorm - HTML+CSS+JavaScript (платный);
  • PHPStorm - HTML+CSS+JavaScript+PHP - (платный);
  • Pycharm - Python - (платный).
  • IntelliJ IDEA - Java - (платный).

Все эти и другие IDE от компании Jetbrains можно скачать с официального сайта.

Некоторые из этих IDE являются бесплатными, а некоторые платными. Хотя IDE от компании Jetbrains: WebStorm, PHPStorm, Pycharm и др. имеют довольно большой период бесплатной работы (trial) - 30 дней, а для студентов и преподавателей можно получить эти IDE на 2 года бесплатно в целях обучения.

Примечание. Если вам не удаётся зайти на сайт www.jetbrains.com и скачать нужную версию программы, то попробуйте сделать это с помощью любого VPN-сервиса (VPN-плагина в браузере). Возможно, в вашей стране данный сайт заблокирован!


Какой редактор кода или IDE выбрать?

Если вы начинающий веб-разработчик или только учитесь основам создания сайтов и написанию кода, то рекомендуется использовать сначала самые простые редакторы кода, такие как Notepad++ (для школьников), SublimeText3, Brackets (для студентов), и только потом, освоив основы написания кода, можно переходить к использованию более профессиональных и сложных в настройках, но более эффективных в применении, интегрированным средам разработки - IDE. Обычно наиболее универсальной и самой простой для освоения IDE (после редакторов) для начинающих веб-разработчиков становится VS Code. А потом выбор IDE уже зависит от направления программирования и применяемых технологий.

Все редакторы кода и IDE во многом схожи между собой и отличаются только набором некоторых функций. Поэтому каждый может выбрать себе редактор или интегрированную среду разработки по своему вкусу и профессиональным потребностям.