HTML Основы. Редакторы кода
Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих
Редакторы кода. На чём писать HTML-код?
Писать HTML код можно, используя стандартные программы Блокнот (на Windows) и TextEdit (на MacOS). Но сейчас существует довольно большое количество разнообразных профессиональных текстовых редакторов, с помощью которых можно писать HTML-код. Хотя для изучения языка HTML рекомендуется сначала писать код как-раз с помощью простых текстовых редакторов - стандартных Блокнота или TextEdit. А научившись писать простой 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>
Шаг 3. Сохраните HTML страницу
Сохраните файл на компьютере. Выберите Файл > Сохранить как в меню Блокнота.
Назовите файл "index.htm" и установите кодировку UTF-8 (которая является лучшей кодировкой для файлов HTML).
Примечание: Вы можете использовать .htm или .html как расширение файла. Они идентичны. Разницы нет, выбор зависит от вас.
Шаг 4. Откройте и посмотрите созданную HTML-страницу в браузере
Откройте сохранённый HTML-файл в своём любимом веб-браузере (дважды кликните файл или кликните правой кнопкой мыши на данном файле и выберите "Открыть с помощью", выбрав необходимый браузер).
Результат будет выглядеть так:
Онлайн-редактор W3Schools
С бесплатным онлайн-редактором на сайте W3Schools вы можете редактировать 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>
Попробуй сам »
Нажмите кнопку "Попробуй сам", чтобы узнать, как она работает.
Примечание: В сети существует множество различных онлайн-редакторов кода, которые вы также можете использовать (бесплатно). Например, кроме онлайн-редактора от w3schools.com, есть такие сервисы, как: jsfiddle.net, codepen.io, thimble.mozilla.org, jsbin.com, rapprogtrain.com, liveweave.com
С помощью каких програм-редакторов пишут код профессональные веб-программисты и веб-верстальщики?
- Какие текстовые редакторы используют профессиональные веб-разработчики?
- Редактор Notepad ++
- Редактор Brackets
- Редактор Sublime Text 3
- Редактор Atom
- IDE Visual Studio Code
- IDE WebStorm / PHPStorm
- IDE Dreamweaver
- IDE NetBeans
Сейчас существует довольно много разных редакторов HTML-кода. Ещё каких-то 12-15 лет назад многих нынешних самых популярных HTML-редакторов даже не существовало. Многие из бывших начинающих веб-дизайнеров и веб-верстальщиков начинали писать свои первые веб-страницы с помощью стандартной программы на Windows - Блокнота. Но сейчас, конечно же, никто с помощью Блокнота HTML-код уже не пишет. Для этого существуют другие более удобные редакторы кода с подсветкой синтаксиса и разными дополнительными функциями, которые облегчают написание кода.
Первым HTML-редактором, который раньше использовали после стандартного Блокнота Windows часто становился Notepad ++. Это свободный текстовый редактор с открытым исходным кодом для Windows с подсветкой синтаксиса большого количества языков программирования и разметки. Поддерживает открытие более 100 форматов. Базовая функциональность программы может быть расширена как за счет плагинов, так и сторонних модулей, таких как компиляторы и препроцессоры. Именно с помощью Notepad ++ можно начинать писать свои первые веб-страницы любым новичкам. Программа небольшая, довольно удобная, имеет русский и украинский интерфейс, её можно скачать бесплатно с официального сайта. Есть портативный вариант (portable) программы, который не требует установки. Её достаточно скачать и распаковать в любую директорию на жестком диске вашего компьютера и пользоваться.
Второй редактор HTML-кода - Brackets - также бесплатный редактор из открытым кодом для веб-разработчиков. Brackets ориентирован на работу с HTML, CSS и JavaScript. Эти же технологии лежат в основе самого редактора, что обеспечивает его кроссплатформенность, т.е. совместимость с операционными системами Mac, Windows и Linux. Большую функциональность этому редактору дают множество расширений (плагинов), что добавляет необходимые инструменты для роботы с кодом. Скачать Brackets можно с официального сайта.
Ещё один чудесный редактор HTML-кода - это SublimeText3. Программа условно-бесплатна. Её можно скачать с официального сайта (или отсюда) и пользоваться абсолютно бесплатно. Единственное неудобство в этом случае - это периодическое появление сообщения о необходимости купить программу. Хотя на просторах Интернета можно найти ключи активации для SublimeText3. Также на официальном сайте SublimeText3 есть только англоязычная версия программы. Но в Интернете легко можно найти и скачать пакеты с переводом на русский или украинский языки и, придерживаясь рекомендаций, самостоятельно их установить в SublimeText3. В целом этот HTML редактор довольно быстрый, простой и понятный в использовании, но всё-таки рекомендуется именно для более опытных пользователей и верстальщиков сайтов, потому что для расширения функциональности в SublimeText3 необходимо дополнительно доустановить некоторые дополнения - плагины, которых существует огромное количество. Но именно плагины и дают все те удобства для этого редактора HTML-кода.
Следующий редактор HTML-кода, и он же интегрированная среда разработки - это Atom. Редактор Атом от команды GitHub предоставляет средства для крос-платформенного редактирования кода, имеет интеллектуальную систему автодополнения ввода и многое другое. Есть множество дополнений и в этого редактора. Хотя для новичков он будте всё-таки довольно сложным, поэтому рекомендуется для более опытных пользователей. Редактор Atom можно скачать бесплатно с официального сайта.
В Интернете можно, конечно же, найти и другие HTML-редакторы. Но все они, как правило, очень похожи на вышеперечисленные. Каждый может выбрать себе редактор по своему вкусу и степени сложности для освоения.
Кроме текстовых редакторов, которые используются для написания HTML/CSS - кода, профессиональные веб-разработчики используют также IDE - (сокращенно от англ. Integrated development environment) - Интегрированную среду разработки. Интегрованные среды разработки созданы для того, чтобы максимизировать продуктивность программиста, предоставив ему связанные инструменты разработки из похожими интерфейсами как одну программу, в которой происходит весь процесс разработки и которая предоставляет необходимые функции. IDE помагают увеличить продуктивность разработчика и ускорить процесс разработки и написания кода.
Наиболее популярными IDE среди веб-разработчиков по состоянию на 2019 год являются такие: VS Code - (бесплатный), WebStorm - (платный), PHPStorm - (платный), Dreamweaver - (платный), NetBeans - (бесплатный) и др.
Некоторые из этих IDE есть бесплатными, а некоторые платными. Хотя WebStorm и PHPStorm имеют довольно большой период бесплатной работы (trial) - 30 дней, а для студентов и преподавателей можно получить эти IDE на 2 года бесплатно в целях обучения. Также на просторах Интернета можно найти ключи активации PHPStorm.