в чем пишут html
Как писать на HTML5 и какие у него возможности
Разбираемся, какие возможности есть у HTML5, чем он отличается от предыдущих версий и что почитать по теме HTML для самообучения.
Что такое HTML
HTML (HyperText Markup Language) — язык разметки гипертекста. Это формат документов, который изначально содержал:
Словарь HTML состоит из множества тегов. Все они записаны в стандарт, который поддерживает международная организация World Wide Web Consortium (Консорциум W3C). Последняя рекомендация W3C для языка HTML имеет номер версии 5.2. В документе перечислены все элементы, которые можно использовать в коде веб-страницы. Это большой словарь, к которому придётся часто обращаться.
Конечно, современные браузеры отлично покажут документ независимо от того, в каком стиле оформлен код HTML, но вам будет стыдно перед коллегами, которые заглянут в исходники. Курс «Frontend-разработчик» поможет не только освоить HTML, но и в разы обойти программистов-самоучек. А сейчас обратимся к самым азам.
Пишет про разработку в Skillbox. Работал главным редактором сайта «Хабрахабр», ведет корпоративные блоги.
Набор технологий HTML5
HTML5 — последняя и самая мощная версия стандарта HTML, с новыми элементами, атрибутами и поведением. Под термином HTML5 также подразумевают набор технологий для разработки сайтов и веб-приложений.
Термином HTML5 обозначаются свыше десяти отдельных стандартов. А некоторые из технологий HTML5 до сих пор не утверждены окончательно. Их поддерживают не все браузеры (или каждый браузер по-разному).
Когда мы говорим об интерактивных сайтах и AJAX, то почти всегда речь идёт о технологиях HTML5.
В HTML5 есть программные интерфейсы (API) для передачи видео и звука, для чатов, в том числе видеочатов через браузер, и многих других интересных интерактивных штук. На HTML5 даже создают браузерные игры. И всем известный YouTube сейчас работает через HTML5, хотя раньше обязательно требовал Flash.
Отличия HTML5 от предыдущих версий
Формально перейти с обычного HTML (HTML4) на HTML5 очень просто: достаточно написать в начале кода веб-страницы тег для указания типа документа.
Всё, теперь у нас документ по стандарту HTML5.
Однако здесь добавлено много новых технологий:
Как редактировать HTML?
Разметка HTML5 создаётся с помощью тех же приложений, что и разметка обычного HTML, начиная с «Блокнота» в Windows и заканчивая современными средствами разработки со встроенными шаблонами для быстрого создания документов HTML5 — например, Notepad++, Sublime Text.
Справочные ресурсы по HTML
Как научиться писать на HTML
Одной зубрёжкой тегов не обойтись. Изучайте основные элементы и экспериментируйте. Поставьте сами конкретную задачу (например, сделать сайт-визитку) или возьмите платное задание как фрилансер и пробуйте его реализовать.
Можно подсматривать в справочник, гуглить, спрашивать совета на форумах и сайтах с вопросами-ответами. Или найти максимально похожий сайт, открыть его код — и разбираться, как он работает. Можно изменить его для своих нужд, только не забудьте стереть копирайты и комментарии авторов.
Копипаст чужой работы — нормальное явление в программировании, здесь это называется Open Source, очень модное и продвинутое течение.
Некоторые разработчики не хотят открывать свой код, они шифруют (обфусцируют) скрипты на сайтах, но их тоже можно разобрать специальными инструментами.
Чтобы создавать интерактивные сайты с более сложной функциональностью, с современным и красивым дизайном, нужно дополнительно изучить CSS, JavaScript, веб-дизайн и некоторые другие предметы. Тут требуется более фундаментальная подготовка.
Погрузившись в обучение, вы научитесь создавать свои собственные
веб-проекты и сможете претендовать на позицию junior-разработчика.
Быстрая вёрстка: какие инструменты использовать и каких правил придерживаться
Верстать сайты — здорово, а делать это быстро — ещё круче! Разбираемся, как этому научиться.
Хороший верстальщик не только знает, как правильно собрать по макету страницу на HTML и CSS, но и умеет делать это быстро. Чем выше скорость — тем лучше.
Давайте рассмотрим основные принципы быстрой вёрстки и некоторые рекомендации, которые сделают работу легче и приятнее.
1. Анализируйте макет до начала работы
Как только получили макет — не спешите сразу его верстать. Сначала обдумайте, даже попробуйте представить будущую страницу в виде HTML-разметки, а уже потом пишите код. Это важно: иначе, возможно, придётся переделывать, потому что появятся неправильная вложенность тегов и другие ошибки. А скорость работы от этого замедлится.
Практикуйтесь: с опытом умение заранее представить, как лучше сверстать макет, придёт само. Это серьёзно ускорит вашу работу.
Автор статей по программированию. Преподаватель, ментор, выпускник Skillbox. Фрилансер, веб-разработчик
2. Освойте метод слепой печати
Это кажется банальным, но чтобы быстро писать код быстро — нужно уметь быстро печатать, не отвлекаясь от макета и внешнего вида сайта в браузере. В этом помогает слепая печать — когда вы не обращаете внимания на клавиатуру, пальцы сами набирают код, используя мышечную память.
Есть множество сайтов, чтобы обучиться или развить навык слепой печати. Например, ratatype.ru.
3. Выберите и настройте текстовый редактор
Писать HTML-код можно в любом редакторе кода, даже в блокноте. Да, он будет работать, его можно редактировать и улучшать, но работать в блокноте — долго и неэффективно. Сейчас есть огромное количество различных редакторов и IDE, в которых писать код гораздо удобнее.
Для верстальщика устанавливать полноценную и платную IDE не имеет смысла — код, который он пишет, не настолько сложный. Но подобные редакторы кода отличаются от блокнота массой возможностей: есть встроенный проводник, управление форматированием кода, подсветка синтаксиса, плагины, даже работа с Git. Всё это ускоряет и делает более удобной разработку.
Один из самых популярных редакторов у верстальщиков — VS Code. Это бесплатный продукт от Microsoft, который очень часто обновляется, дорабатывается и улучшается. Есть аналоги: Sublime Text 3, Atom, Brackets. Какой из них выбрать — решать вам.
4. Плагины в редакторе кода
Плагины, которые уже есть (или можно добавить) в редактор кода, — важная часть работы любого верстальщика. Их множество, но я посоветую только те, что действительно ускорят вашу работу.
Конечно, есть и другие плагины для разных целей, но эта статья о другом.
5. Готовые фрагменты кода
Никто из программистов не любит писать лишний код, и верстальщики не исключение. Рано или поздно вы замечаете, что из проекта в проект повторяется реализация того или иного элемента. Крайне полезно вынести это в готовый фрагмент кода — сниппет.
Сниппеты можно реализовать прямо в редакторе или использовать Github Gist — своеобразное хранилище для кода. А с помощью плагина Gist содержимое готовых сниппетов можно легко доставать оттуда.
Использование и переиспользование кода — отличный способ ускорить вёрстку и избежать лишних опечаток.
6. Использование БЭМ
Многих начинающих верстальщиков пугает аббревиатура БЭМ (блок-элемент-модификатор) — сидеть и разбираться в том, где блок, а где элемент, кажется сложным.
На самом деле это не так. Попрактикуйтесь, сделайте несколько макетов по БЭМ, мозг привыкнет и начнёт автоматически выдавать правильные суждения о сущностях HTML-элементов, их именовании и так далее.
Вам больше не потребуется придумывать названия классов (это часто приводит к трате времени) или то, как элементы будут зависеть друг от друга.
В общем, стоит сперва побуксовать, изучив БЭМ, чтобы потом делать быстрее и правильнее. Кстати, знать БЭМ требуют в 90% вакансий.
7. Препроцессоры
Препроцессоры — это надстройка над привычными нам языками (например, CSS), которая добавляет массу новых возможностей.
Известный препроцессор Sass даёт возможность использования специальных импортов файла в файл (что поможет в организации кода), вложенности в селекторах (не придётся писать селектор каждый раз с новой строки), миксинов (по сути, функций, которые позволяют сокращать код и выносить одинаковые реализации), переменных и так далее.
Сейчас невозможно представить профессионала в вёрстке, не использующего препроцессоры, — они в несколько раз ускоряют рабочий процесс, позволяют лучше структурировать проект.
8. Сборщики проекта
Сборщики проекта нужны, чтобы сделать то, что разработчику не хочется делать руками — и на что уходит много времени.
Например, Gulp может автоматически собирать все файлы в один, расставлять префиксы для поддержки разных браузеров, создавать SVG-спрайты, и многое другое. Но самое удобное именно для вёрстки здесь и сейчас — возможность автоматически обновлять страницу браузера при сохранении кода.
Если вы используете Gulp, больше не нужно вручную переключаться на браузер и нажимать на кнопку обновления каждый раз после вёрстки какого-либо элемента. Это здорово сокращает затраты времени верстальщика.
Выводы
Здесь перечислены основные методы и инструменты, которые помогут ускорить вашу вёрстку. Все эти инструменты, плагины, редакторы кода — очень здорово. Но главное — ваш профессионализм.
Очень важна практика, постоянное изучение нового (поверьте, в HTML и CSS очень много всего) и самоконтроль. Со временем вы сможете сверстать один и тот же макет не за 2-3 дня, а за 5-6 часов. И это будет свидетельством того, что вы верстаете быстро.
Научиться настраивать редактор, использовать плагины и препроцессоры, а также автоматически собирать проекты можно на нашем курсе.
10 лучших HTML-редакторов
Рассматриваем лучшие приложения для работы с HTML-разметкой. Узнаем, чем пользуется верстальщик с глубокими познаниями в разработке, а чем пользуется тот, кто совсем не разбирается в программировании.
Что такое HTML-редактор?
HTML-редактор – это программа, в которой пишут «основание» для сайтов. Технически эту роль может выполнять любой текстовый редактор, даже «Блокнот». Но лучше доверить эту задачу приложению, специально созданному для работы с кодом.
Обычно в таких программах есть подсветка синтаксиса (отдельных элементов разметки), автоматическая проверка на ошибки и опечатки, да и в целом интерфейс спроектирован таким образом, чтобы в нем было удобнее работать именно с сайтами.
HTML-редакторы не так функциональны, как полноценные среды разработки, но они подходят как для новичков, так и для профессионалов, не желающих заниматься версткой страниц в громоздких приложениях.
Иногда такие программы называют HTML-компиляторами, хотя по факту в них никакой код не компилируется. HTML – это не язык программирования, а язык разметки, не требующий компиляции как таковой. Тем не менее пользователи иногда так говорят, и я не буду им противиться.
Типы редакторов
Есть два основных типа:
Еще есть среды для разработки. Это программы, созданные для профессиональных разработчиков и содержащие в себе весь спектр инструментов, необходимых для создания сайта или приложения с нуля. В этой статье я не буду их затрагивать.
Полезные характеристики HTML-редакторов
При выборе текстовых и визуальных HTML-компиляторов стоит обратить внимание на наличие базовых функций:
Текстовые редакторы
Сперва рассмотрим HTML-редакторы для разработчиков. Для тех, кто понимает структуру страницы и может, используя HTML, разместить контент на сайте. Такие приложения дают больше свободы верстальщикам. Ведь благодаря возможностям разметки они получают полный контроль над информацией на ресурсе и его визуальной составляющей.
Атом появился в 2014 году и резко набрал популярность среди разработчиков всех сортов. Он бесплатный, с открытым исходным кодом. Его созданием занималась команда GitHub – главного хранилища кода в интернете. За поддержку и развитие проекта отвечает сообщество независимых программистов, продвигающих opensource-проекты.
Atom построен на базе фреймворка Electron, что делает его универсальным приложением для всех платформ сразу, то есть для Windows, macOS и Linux. Также это дает возможность расширять возможности редактора, используя JavaScript. Разработчики могут менять функциональную составляющую Atom и внешний вид приложения, адаптируя его под свои нужды (используемый язык программирования, проект, над которым работает пользователь и т.п.). Поэтому многие разработчики по праву считают его лучшим HTML-редактором.
Из интересных фишек стоит отметить множественные курсоры для редактирования одновременно нескольких строк кода и функцию Teletype для совместной работы нескольких программистов в одном пространстве.
Скачать Atom (Windows, macOS и Linux)
VS Code
Еще один бесплатный редактор HTML-разметки на базе Electron. Это разработка Microsoft с огромным набором плагинов. С помощью расширений можно добавить в него массу дополнительных функций:
Также в VS Code встроен клиент Git, позволяющий загружать проект в GitHub прямо из компилятора, не используя для этого отдельный терминал. А еще система IntelliSense, помогающая дополнять код за счет уже использованных функций, классов и кусков разметки.
В отличие от Atom, детище Microsoft работает заметно быстрее. Разработчики массово переходят на VS Code из-за разницы в производительности.
Скачать VS Code (Windows, macOS и Linux)
Sublime Text
HTML-компилятор из Австралии, распространяющийся по условно-бесплатной модели. То есть сам редактор в базовом виде можно загрузить и использовать бесплатно, но чтобы получить весь набор доступных в нем функций, придется раскошелиться.
Sublime Text сочетает в себе лучшее из двух миров (из Open Source и мира проприетарного ПО). За счет платных лицензий и грамотной монетизации у разработчиков программы остается возможность регулярно обновлять продукт и поддерживать его. В то же время код достаточно «открыт», чтобы сторонние разработчики могли добавлять в него новые функции и создавать расширения, используя язык программирования Python.
Sublime Text – высокопроизводительный редактор. Причем это проявляется не только в плавности и отзывчивости интерфейса. В компиляторе есть функция моментального переключения между проектами. Не приходится долго искать папку с другим сайтом, перезагружаться в другую среду разработки и ждать, пока она прогрузится, как это происходит в Atom или VS Code.
Notepad++
Бесплатный редактор кода для операционной системы Windows (на Linux и macOS работает через эмуляторы). Распространяется бесплатно, имеет открытый исходный код, который можно загрузить с официального репозитория программы на GitHub.
Продукт написан на языке С++ и базируется на площадке Scintilla. Как и другие компиляторы, развиваемые сообществом разработчиков, Notepad++ поддерживает сторонние плагины. С помощью них можно добавлять в редактор новые функции или изменять внешний вид интерфейса.
Создатель проекта считает главным преимуществом своего приложения использование только встроенных инструментов для разработки под Windows, чтобы добиться максимальной производительности и сократить нагрузку на процессор компьютера.
У Notepad++ есть мобильная версия для тех, кто занимается разработкой «на ходу».
CodeRunner
Один из лучших редакторов HTML-разметки и кода, разработанный для macOS. Он не поддерживает расширение плагинами (в отличие от перечисленных выше решений). Напротив, его создатель решил вместить максимум возможностей в программу, избегая необходимости в сторонних дополнениях.
Он поддерживает работу в нескольких вкладках, удобную систему навигации по документам и файлам, редактор скриптов, полноценную консоль внутри CodeRunner, готовые текстовые шаблоны и т.п.
Из интересных решений стоит отметить наличие встроенной панели с документацией. Эта панель обеспечивает доступ к ресурсу Mozilla MDN с описанием функций JavaScript и других языков. Там же можно быстро найти информацию по поводу той или иной функции языка на популярном форуме для программистов Stack Overflow.
CodeRunner поддерживает автодополнение кода, ищет популярные ошибки, позволяет ставить курсор сразу в несколько частей разметки и настраивать свои горячие клавиши. При этом программа часто получает обновления и полностью адаптирована под macOS.
Espresso
Еще один эксклюзивный редактор для macOS, поддерживающий HTML, CSS, JavaScript и несколько других языков, используемых при разработке сайтов.
Одно из главных преимуществ Espresso – функция Xray. Она в реальном времени отображает состояние сайта или веб-приложения. Любое изменение в коде в ту же секунду появляется на превью. А превью, в свою очередь, поддерживает работу с браузерами Chrome, Firefox и Safari.
Также Espresso часто используют для работы с CSS. Компилятор поддерживает новейшие технологии, связанные с каскадными стилями. Редактор упрощает работу над внешним видом страницы (градиенты, цвета, тени, разметка и т.п.)
Расширить возможности редактора можно за счет плагинов. Их коллекция не такая внушительная, как у условного VS Code, но самые востребованные точно найдутся.
А еще в Espresso встроен пакет инструментов для публикации сайтов в сети. Он синхронизирует данные с сервером, независимо от того, какую платформу для размещения ресурса вы используете.
Brackets.io
Легковесный кроссплатформенный редактор, адаптированный для работы с сайтами. Одна из лучших функций Brackets – мини-редактор, встроенный в основной код. Он появляется только в те моменты, когда нужен пользователю. Например, вы вносите изменения в HTML с определенным классом. Чтобы не переключаться на вкладку с CSS, редактор предлагает открыть небольшое окно с кодом CSS для выбранного класса, чтобы внести туда изменения, не покидая главную страницу.
Таким образом удается на ходу редактировать сразу два или даже три файла, не переключаясь между окнами и вкладками.
Также здесь есть режим Live Preview, позволяющий в реальном времени наблюдать за изменениями, вносимыми в дизайн и содержимое страницы. Все, что делает пользователь, появляется на экране в ту же секунду.
Ну и еще одно преимущество – встроенная поддержка препроцессоров SCSS и LESS со всеми их особенностями и дополнительными функциями. Не придется подключать их отдельно.
Знаменитый текстовый редактор, использующийся для решения самых разнообразных задач – от записи математических конспектов до создания полноформатных заскриптованных онлайн-магазинов.
Он удобен для разработки, так как за счет плагинов поддерживает подсветку синтаксиса, исправление ошибок, быстрый поиск, замену содержимого страниц и другие функции, доступные в полноценных средах.
Сложностью для многих пользователей станет только специфичное управление, которым и знаменит Vim. Но поклонники редактора как раз и любят его за нестандартный подход к перемещению по тексту и его редактированию.
Визуальные HTML-редакторы
С помощью визуальных редакторов вы будете напрямую взаимодействовать со страницей в том виде, в котором ее увидят потенциальные пользователи.
А они, понятное дело, не увидят на нем код и структуру CSS-файлов. Только полезную информацию.
Adobe Dreamweaver CC
Массивный продукт компании Adobe для создания веб-страниц. Он адаптирован для работы с языками разметки HTML и CSS, а также для работы с языками программирования JavaScript и другими. Dreamweaver подходит как для фронтенд-разработки (то есть внешней части сайта, с которой взаимодействует посетитель), так и для бэкенда (внутренней части, отвечающей за логику сайта).
Dreamweaver CC создавался для работы в кооперации с другими продуктами компании. Под этим подразумевается быстрый экспорт изображений и макетов из Photoshop или XD. DW имеет закрытый исходный код, поэтому его возможности можно расширять только плагинами, одобренными самой Adobe.
И хотя Dreamweaver CC, в первую очередь, визуальный компилятор страниц, он отлично работает в текстовом режиме. Между режимами можно переключаться в любое время, выбирая удобный стиль работы.
Купить Dreamweaver CC (1550 рублей в месяц, платформы – Windows, macOS и Linux)
RapidWeaver
Это аналог Dreamweaver, созданный для операционной системы Apple. Вместе с тем, это один из наиболее часто используемых визуальных HTML-компиляторов.
По умолчанию он содержит в себе парочку симпатичных шаблонов для будущих сайтов, удобную систему навигации между страницами, а также файловый менеджер для загрузки собственного контента на публикуемые страницы. А еще функцию размещения ресурса в сети.
В нем есть удобная интеграция с сервисом Unsplash, симулятор устройств, чтобы можно было оценить внешний вид сайта в разных разрешениях, и базовые инструменты для поисковой оптимизации.
Но возможности RapidWeaver легко поддаются расширению за счет эксклюзивных плагинов. Благодаря им можно сделать любой тип сайта, будь то небольшую галерею или полноценный онлайн-магазин, просто перемещая блоки с информацией по странице и добавляя в них модули из маркетплейса с расширениями.
Купить RapidWeaver (7400 рублей, только для macOS)
В CMS есть инструменты для проектирования сайтов, заменяющие HTML-редакторы. В них можно быстро собрать страницу, добавив туда весь необходимый контент (или добыв его из соответствующих плагинов). Назвать их HTML-редакторами трудно, но движки в себя таковые включают.
Даже Gutenberg (интерфейс для написания постов в WordPress) содержит HTML-редактор.
Выводы
Если ищите себе первый редактор для работы с кодом, то попробуйте что-нибудь попроще, Notepad++ или CodeRunner. Если нужен лучший HTML-редактор среди доступных, то для этого есть VS Code (или Atom для поклонников Teletype). Если нет навыков в работе с кодом, то для быстрого старта сойдет то, что уже есть в WordPress. А если нужно править код на базе уже готового бэкенда, то можно перескочить на Dreamweaver.