Программы для работы с html и css: Лучшие редакторы HTML для Windows, Linux и macOS

Обзор html, css, js редакторов под Windows / Хабр

Сравнительно недавно встал вопрос замены громоздкого и дорогого Adobe Dreamweaver на что нибудь более легковесное и не столь дорогое. Возможные варианты под катом.

Для этой цели был создан вопрос в разделе Q&A, на который было получено множество ответов. Спасибо всем откликнувшимся.

Выбранные редакторы были сравнены по нескольким пунктам.

Платные редакторы

HTMLPad

• Цена: $45.85;
• Готовые цветовые схемы (в т.ч. и темные): нет;
• Настройка подсветки кода под себя: очень широкие возможности настройки;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: можно настраивать, теги подсвечиваются;
• Открытие/закрытие блоков кода: нет;
• Автозакрытие тегов, кавычек, скобочек: присутствует, настраивается;
• Автокомплитер и его удобство: есть, очень удобный;
• Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js есть, jquery нет;
• Поддержка html5 и css3: html5 нет, css3 есть;
• Подхват зависимых файлов (css,js): нет, но если открыть css и html файлы, то автокомплитер увидит название классов и id из файла стилей;
• Организация проектов: присутствует, обычная;
• ftp-клиент: присутствует;
• Вес дистрибутива: 5,7 мб;
• Наличие portable версии: не нашел;
• Замеченные плюсы: быстро открывается, быстро работает;
• Замеченные минусы: нет.

WeBuilder

• Цена: $69.85.
• Редактор такой же как и HTMLPad, но имеет расширенный набор функций для программистов.

Web Storm

• Цена: $69;
• Готовые цветовые схемы (в т.ч. и темные): нет;
• Настройка подсветки кода под себя: о
  чень широкие возможности настройки;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов:теги подсвечиваются;
• Открытие/закрытие блоков кода: да;
• Автозакрытие тегов, кавычек, скобочек: присутствует, настраивается;
• Автокомплитер и его удобство: есть, неплохой;
• Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js есть, jquery нет;
• Поддержка html5 и css3: html5 есть, css3 есть;
• Подхват зависимых файлов (css,js): нет, но если открыть css и html файлы, то автокомплитер увидит название классов и id из файла стилей;
• Организация проектов: присутствует, расширенная;
• ftp-клиент: присутствует;
• Вес дистрибутива: 63,8 мб;
• Наличие portable версии: не нашел;
• Замеченные плюсы: в CSS файлах, удобная плюшка с подсветкой использованных цветов. Широкие возможности поиска элементов внутри проекта. Куча других настроек и опций;
• Замеченные минусы: долго открывается, тяжеловато работает.

Top Style Pro

• Цена: $79.95;
• Готовые цветовые схемы (в т.ч. и темные): нет;
• Настройка подсветки кода под себя: широкие возможности настройки;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: нет;
• Открытие/закрытие блоков кода: частичная в css;
• Автозакрытие тегов, кавычек, скобочек: в html и css есть, в js нет;
• Автокомплитер и его удобство: есть, неудобный по CTRL+пробел;
• Поддержка html, css, js и jquery автокомплитером:
  html есть, css есть, js нет, jquery нет;
• Поддержка html5 и css3: html5 есть, css3 нет;
• Подхват зависимых файлов (css,js): нет;
• Организация проектов: присутствует, не очень удобная;
• ftp-клиент: присутствует;
• Вес дистрибутива: 5,2 мб;
• Наличие portable версии: не нашел;
• Замеченные плюсы: подойдет начинающим;
• Замеченные минусы: ориентирован на визуальную разработку, а не на удобство работы с кодом.

Sublime Text

• Цена: $59;
• Готовые цветовые схемы (в т.ч. и темные): да;
• Настройка подсветки кода под себя: не нашел;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: нет;
• Открытие/закрытие блоков кода: нет;
• Автозакрытие тегов, кавычек, скобочек: в html нет, в css и js есть;
• Автокомплитер и его удобство: есть, неудобный по CTRL+пробел;
• Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js есть, jquery нет;
• Поддержка html5 и css3: html5 нет, css3 нет;
• Подхват зависимых файлов (css,js): нет;
• Организация проектов: присутствует, не смог сходу разобраться;
• ftp-клиент: не нашел;
• Вес дистрибутива: 17 мб;
• Наличие portable версии: есть;
• Замеченные плюсы: быстро открывается, быстро работает;
• Замеченные минусы: сходу очень трудно разобраться, требуется прилично времени на освоение.

Microsoft Expression Studio 4 Web Professional

• Цена: $149.95;
• Даже не пытался пробовать, софт явно для любителей Visual Studio и пр. продуктов MS

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

Notepad++

• Готовые цветовые схемы (в т.ч. и темные): да;
• Настройка подсветки кода под себя: да;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: да, очень удобная подсветка;
• Открытие/закрытие блоков кода: есть, для выделенных фрагментов только;
• Автозакрытие тегов, кавычек, скобочек: нет;
• Автокомплитер и его удобство: есть, непривычный;
• Поддержка html, css, js и jquery автокомплитером: html есть, css частично, js частично, jquery нет;
• Поддержка html5 и css3: html5 нет, css3 нет;
• Подхват зависимых файлов (css,js): нет;
• Организация проектов: нет;
• ftp-клиент: есть через плагин;
• Вес дистрибутива: 5,2 мб;
• Наличие portable версии: не нашел;
• Замеченные плюсы: быстро открывается, быстро работает;
• Замеченные минусы: скудный функционал.

Aptana

• Готовые цветовые схемы (в т.ч. и темные): да;
• Настройка подсветки кода под себя: да;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: да, очень удобная подсветка;
• Открытие/закрытие блоков кода: есть, для выделенных фрагментов только;
• Автозакрытие тегов, кавычек, скобочек: нет;
• Автокомплитер и его удобство: есть, почему-то в html сразу выскакивает, а в css по ctrl+пробел;
• Поддержка html, css, js и jquery автокомплитером:
  html есть, css есть, js частично, jquery нет;
• Поддержка html5 и css3: html5 есть, css3 частично;
• Подхват зависимых файлов (css,js): нет;
• Организация проектов: есть;
• ftp-клиент: есть;
• Вес дистрибутива: 130 мб;
• Наличие portable версии: не нашел;
• Замеченные плюсы: нет;
• Замеченные минусы: нещадно тормозит.

Komodo Edit
Очень похож на Notepad++. Для работы лучше сразу установить плагин HTML Toolkit

• Готовые цветовые схемы (в т.ч. и темные): да;
• Настройка подсветки кода под себя: да;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: да;
• Открытие/закрытие блоков кода: есть;
• Автозакрытие тегов, кавычек, скобочек: да, частично;
• Автокомплитер и его удобство: есть, с подсказками;
• Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js частично, jquery нет;
• Поддержка html5 и css3: html5 есть, css3 есть;
• Подхват зависимых файлов (css,js): нет;
• Организация проектов: да;
• ftp-клиент: не нашел;
• Вес дистрибутива: 41,5 мб;
• Наличие portable версии: не нашел;
• Замеченные плюсы: похож на np++, но функционал заметно шире;
• Замеченные минусы: настройки не очень интуитивны.

RJ TextEd

• Готовые цветовые схемы (в т.ч. и темные): нет;
• Настройка подсветки кода под себя:
  да;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: да;
• Открытие/закрытие блоков кода: есть;
• Автозакрытие тегов, кавычек, скобочек: да, частично;
• Автокомплитер и его удобство: есть, неудобный ctrl+пробел и плохо работающий;
• Поддержка html, css, js и jquery автокомплитером: html есть, css частично, js нет, jquery нет;
• Поддержка html5 и css3: html5 есть, css3 нет;
• Подхват зависимых файлов (css,js): нет;
• Организация проектов: да;
• ftp-клиент: не нашел;
• Вес дистрибутива: 10 мб;
• Наличие portable версии: не нашел;
• Замеченные плюсы: нет;
• Замеченные минусы: имхо хромает качество.

PSPad

• Готовые цветовые схемы (в т.ч. и темные): нет;
• Настройка подсветки кода под себя: частично;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: нет, подсветка парных тегов есть;
• Открытие/закрытие блоков кода: нет;
• Автозакрытие тегов, кавычек, скобочек: да, частично;
• Автокомплитер и его удобство: есть, неудобный ctrl+пробел + модальное окно с настройками;
• Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js нет, jquery нет;
• Поддержка html5 и css3: html5 нет, css3 нет;
• Подхват зависимых файлов (css,js): нет;
• Организация проектов: да;
• ftp-клиент: есть;
• Вес дистрибутива: 4,2 мб;
• Наличие portable версии: не нашел;
• Замеченные плюсы: нет;
• Замеченные минусы: неудобный.

Eclipse IDE for JavaScript Web Developers

• Готовые цветовые схемы (в т.ч. и темные): нет;
• Настройка подсветки кода под себя: не нашел;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: да, подсветка парных тегов есть;
• Открытие/закрытие блоков кода: да;
• Автозакрытие тегов, кавычек, скобочек: да, частично;
• Автокомплитер и его удобство: есть, неудобный ctrl+пробел;
• Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js есть, jquery нет;
• Поддержка html5 и css3: html5 есть, css3 нет;
• Подхват зависимых файлов (css,js): нет;
• Организация проектов: да;
• ftp-клиент: есть;
• Вес дистрибутива: 108 мб;
• Наличие portable версии: работает без установки;
• Замеченные плюсы: нет;
• Замеченные минусы: громоздкость, требует Java.

NetBeans IDE

• Больше подходит программистам, т.к. содержит готовые сборки под разные языки.

Выводы

Как оказалось, выбор очень велик. К сожалению не могу сказать, что какая-то из программ оставила такое впечатление чтобы я сразу выкинул Dreamweaver и перешел на неё. Но тем не менее разочарованным я тоже не остался. Мой выбор — платный HTMLPad. Ни один из бесплатных редакторов не показался мне достаточно удобным (но это дело привычки для каждого, я считаю).

Среда разработки HTML: лучшие бесплатные программы для веб-дизайна

Чтобы стать полноценным веб-разработчиком, нужно не только знать как писать код, но и уметь использовать различные программы для веб-дизайна, которые облегчают весь комплекс работ.

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

 

Программы для веб-дизайна

Программы для веб-дизайна достаточно разнонаправлены по своей ориентации. Но при этом все равно первой программой веб-разработчика будет текстовый редактор для html или полноценная среда разработки.

HTML  имеет достаточно простой код, из-за этого, условно, его можно написать даже в «Блокноте».  Поэтому иногда для написания html используют простой текстовый редактор. Что текстовый редактор отличает от среды разработки html? Возможности и функции.

Текстовый редактор дает возможность писать код html или код других языков программирования и ничего более, дальнейшее расширение функционала достаточно скудное. Среда разработки — это уже многофункциональная программа, в которую входит  «текстовый редактор html», но помимо этого в IDE можно работать с другими языками программирования, они имеют различные дополнительные функции, например:

• автозаполнение тегов;

• качественную подсветку синтаксиса;

• синхронизацию с GitHub или системами управления проектами;

• удобную навигацию между проектами или папками проектов;

• плагины для тестирования и оптимизации кода;

• сохранение проектов на удаленных серверах;

• и мн. др.

Как правило, функциональность любой IDE расширяется при помощи  дополнительных плагинов. Если «текстовый редактор html» — это про «писать код», то «среда разработки» — это про «писать код быстро и эффективно, создавая проекты любого размера».

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

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

Вот такая вот «палка с двумя концами», при выборе между IDE или редактором. А кто говорил, что программирование — это легко? 

 

Программы для веб-дизайна: среда разработки и редактор кода html

На сегодняшний день сред разработки большое множество. Есть платные и бесплатные. Большинство из IDE обладают всеми нужными базовыми функциями:

• закрывают теги или скобки/кавычки;

• автоматически расставляют отступы;

• подсвечивают синтаксис;

• имеют удобный поиск и навигацию по проекту;

• имеют множество дополнительных плагинов, расширяющих возможности IDE, добавляя им специфические функции.

 Если посмотреть на выбор IDE «свысока», то отличаются они платностью/бесплатностью, внешним видом и удобством работы. Поэтому выбор среды разработки очень индивидуален. С редакторами кода такая же беда. По своей функциональности они плюс-минус одинаковы, отличаются только удобством работы и внешним видом.

 

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

1. Komodo Edit — это немного «урезанная» версия полноценной среды разработки Komodo IDE.

2. Vim — изначально был простым редактором текста, однако при помощи расширений стал полноценным редактором кода.

3. GNU Emacs — текстовый редактор кода Linux-платформ.

4. Visual Studio Code — это многофункциональный редактор кода, который чуть-чуть не дотягивает до полноценной IDE.

5. Sublime Text — простой, удобный, кроссплатформенный текстовый редактор кода.

6. Atom — популярный текстовый редактор от команды GitHub, который при помощи дополнений и расширений превращается в полноценную IDE.

7. Nodepad++ — один из первых редакторов, который встречается на пути начинающих программистов.

 

Среда разработки html и не только

1. Eclipse IDE — поддерживает множество популярных языков программирования. Можно разрабатывать «мобильные» приложения.

2. NetBeans — профессиональный инструмент для разработки мобильных и веб-приложений. Поддерживает множество современных языков и их фреймворки по умолчанию.

3. Geany — одна из самых легких IDE. Очень простая для изучения и не потребляет много ресурсов компьютера. В базовой комплектации имеет все, что нужно для веб-разработки, если чего-то нет, то это можно заполучить установив нужно расширение.

4. JetBrains — это целый набор IDE для разных языков программирования.

Все перечисленные выше редакторы и IDE — это программы, которые устанавливаются на ваш компьютер. Если вы по каким-то причинам не хотите их инсталлировать, то можно воспользоваться облачными программами для веб-разработки:

• Cloud9;

• Codeanywhere;4

• Eclipse Che;

• и др.

 

Программы для веб-дизайна: другой софт

Программы для веб-дизайна — это не только среда разработки или текстовый редактор html, но и множество других программ и онлайн-сервисов, которые упрощают жизнь веб-разработчику. Например:

• программы для обработки изображений, тот же Adobe Photoshop или Sketch-графический редактор;

• Figma — инструмент для создания макетов и прототипов интерфейса пользователей;

• платные и бесплатные стоки — места откуда можно брать изображения и графику для своих проектов, типа Pixabay, Shutterstock, Unsplash и др. ;

• программы для подбора и работы с цветом, например Dribble, Adobe Color и др.;

• сервисы для подбора, анализа и идентификации шрифтов, например WhatTheFont и др.;

• программы для 3D-моделирования и анимации;

• и многое-многое другое.

 

Заключение

Многие «рвутся» в веб-дизайн и веб-разработку из-за достаточно низкого порога входа в эти профессии.  В плане изучения технологий — это так и есть; знаний основ HTML, CSS, JavaScript будет достаточно.

Но при этом веб-разработчика окружает достаточно большое количество инструментов, которыми он должен овладеть: текстовый редактор или среда разработки html — это самое начало, а дальше нужно будет обязательно изучать различные программы для веб-дизайна. Их список будет строго зависеть от того, над какими проектами вам придется работать.

Редактор HTML/CSS/JavaScript — Возможности | PhpStorm

Примечание: PhpStorm включает в себя все функции WebStorm, связанные с HTML, CSS и JavaScript.

Завершение кода на основе DOM, специфичное для браузера

Завершение кода JavaScript, HTML и CSS для тегов, ключевых слов, меток, переменных, параметров и функций основан на модели DOM и поддерживает специфику популярных браузеров, таких как Firefox и Хром.

Дополнение доступно как для стандартных, так и для пользовательских функций в файлах *.js, HTML событие обработчики и все другие соответствующие контексты.

Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, Dart и другие передовые веб-приложения технологии разработки поддерживаются.

Отладчик JavaScript

С помощью JetBrains PhpStorm вы можете отлаживать JavaScript, используя при этом полный спектр интеллектуальных функций:

• Точки останова в HTML и JavaScript
• Настраиваемые свойства точки останова: режим приостановки, условия, количество проходов и т. д.
• Фреймы, переменные и просмотры в пользовательском интерфейсе отладчика JavaScript
• Оценка выражений JavaScript во время выполнения
• Модульное тестирование в JavaScript

Редактирование в реальном времени

Предварительный просмотр редактирования в режиме реального времени экономит много времени и усилий. Откройте страницу в редакторе и в браузере, чтобы вы могли видеть и то, и другое, и активировать функцию Live Edit при запуске JavaScript сеанс отладки. Начните редактировать код и мгновенно наблюдайте за изменениями в браузере, даже если вы собираетесь через параметры списка во всплывающих окнах завершения кода.

PhpStorm автоматически сохраняет ваши изменения, и браузер оперативно обновляет страницу на лету, показывая ваши правки.

File Watchers

Воспользуйтесь преимуществами автоматической компиляции/транспиляции современных веб-разработок языки для JavaScript (из CoffeeScript, TypeScript, Dart и т. д.) или CSS (из Sass, SCSS, Less, Stylus, Compass и т. д.) с File Watchers.

Высокоскоростное кодирование

Редактор позволяет использовать все возможности Emmet (ранее Zen Coding). Определите свой собственные аббревиатуры (фрагменты) с живыми шаблонами или используйте предопределенные для PHP, HTML, CSS, JS и другие языки.

Проверка и быстрое исправление

PhpStorm обнаруживает и предлагает автоматические исправления для таких проблем, как: отсутствует требуется атрибуты, неверные атрибуты или недопустимые значения, неправильные ссылки на файлы в ссылках, дублирование атрибуты, недопустимый формат селектора CSS, недопустимые свойства CSS, неиспользуемый класс CSS определения, недопустимые локальные привязки и многое другое.

Рефакторинг JavaScript

Возможности рефакторинга для JavaScript позволяют легко изменять код структуры, а также отменить изменения. Некоторые рефакторинги, доступные для JS: переименовать, Извлечение переменной/функции, встроенная переменная/функция, перемещение/копирование, безопасное удаление, извлечение встроенный скрипт в файл.

JSLint/JSHint

Инструменты качества кода JavaScript интегрированы в редактор JavaScript для проверки твой код просто как вы его редактируете. Откройте «Настройки», введите JSLint/JSHint, включите проверку, и ваш код будет быть проверены против этих проверок, как вы печатаете.

Node.js

PhpStorm полностью поддерживает Node.js с помощью бесплатного подключаемого модуля, доступного в репозитории. Это обеспечивает завершение кода, подсветка, навигация, проверка ошибок, отладка, управление пакетами с нпм и многое другое.

Поддержка ECMAScript Harmony

Для тех, кто предпочитает быть на шаг впереди, PhpStorm предоставляет поддержку Гармония ECMAScript. Чтобы опробовать новые функции, установите ECMAScript Harmony в качестве версии языка JavaScript в настройки IDE.

Поддержка шаблонов JavaScript и веб-компонентов

PhpStorm поддерживает механизм шаблонов EJS (подсветка синтаксиса, помощь при наборе текста, форматирование, и т. д.), а также обеспечивает форматирование и подсветку синтаксиса для Handlebars и Mustache. шаблоны, а также автоматическое закрытие тегов.

Также имеется начальная поддержка веб-компонентов.

Поддержка Angular

Поддержка Angular в PhpStorm включает завершение кода и навигацию по директивам и привязки, и понимание новых атрибутов событий для TypeScript или ECMAScript 2015.

Поддержка Flow

Вы можете использовать аннотации типов, которые Flow добавляет в JavaScript. Когда используешь аннотированные функции или методы, вы получите информацию о типизированном параметре при завершении кода.

TSLint

PhpStorm обеспечивает интеграцию с TSLint, линтером для кода TypeScript. Включить это чтобы увидеть предупреждения а ошибки из TSLint прямо в редакторе, по мере ввода.

Vue.js

Наслаждайтесь помощью в написании кода для языка шаблонов Vue и языка по вашему выбору в блоки сценариев и стилей файла .vue. Среда IDE автоматически дополняет компоненты Vue и добавляет для них необходимый импорт.

Скачать PhpStorm

HTML и CSS (учебник и примеры 2023 г.)

Справочники по HTML и CSS

HTML и CSS — это фундаментальные технологии для веб-разработки и создания веб-страниц. Обозначая язык гипертекстовой разметки, HTML придает веб-странице структуру, а CSS (что означает каскадные таблицы стилей) придает веб-страницам их визуальный макет. HTML и CSS лежат в основе большинства веб-сайтов и веб-приложений.

В чем разница между HTML и CSS?

Основное различие между HTML и CSS заключается в том, что, хотя HTML определяет структуру веб-страниц, CSS используется для оформления этих страниц с помощью различных функций. Если мы думаем о HTML-коде как о скелете веб-страницы, CSS будет его оболочкой.

Другие различия между HTML и CSS включают:

• HTML состоит из текста, содержащегося в тегах HTML, тогда как CSS состоит из блоков объявлений и селекторов
• Там, где HTML предоставляет веб-браузеру информацию об отображении различных тегов, CSS расширяет эту информацию для браузера, добавляя стили к этим HTML-тегам
• CSS можно использовать внутри документа HTML, но HTML нельзя использовать внутри листа CSS
• CSS используется для представления и визуальных эффектов — для управления цветами, шрифтами и фоном, добавления визуального стиля сайтам, подготовки изображений, указания полей и границ и многого другого — в то время как HTML не является

---

Как связать CSS с HTML

Существует три способа связать или добавить CSS на HTML-страницу: встроенный стиль, внутренний стиль и внешний стиль.

Встроенный CSS

Самый простой способ добавления CSS в файл HTML. Встроенный стиль применяется к документам HTML с помощью атрибута стиля. Встроенные стили могут применять уникальные стили к элементам HTML или отдельному элементу HTML. Любое свойство CSS может содержаться в атрибуте стиля. Следует отметить, что, поскольку встроенные стили смешивают представление и содержимое, этот метод не следует использовать слишком часто.

Пример встроенного кода CSS

 

  <тело>
    

    Это центрированный абзац с синим текстом.
  

 

Внутренний CSS

Если отдельная HTML-страница имеет уникальный стиль, вы можете использовать внутреннюю таблицу стилей, которая будет определена в разделе заголовка HTML-страницы в элементе стиля.

При написании HTML вы можете поместить столько стилей CSS, сколько хотите, между открывающим и закрывающим тегами стиля перед телом. Вот пример внутреннего CSS.

Образец внутреннего CSS

 

  <голова>
    
    <тип стиля="текст/CSS">
      h2{
        цвет: #0000FF;
      }
      h3{
        цвет: #00CCFF;
      }
    

 

Внешний CSS

Внешняя таблица стилей — это текстовый файл, содержащий только форматы стилей CSS, которые будут иметь расширение .