Слайд 2Язык гипертекстовой разметки
Brackets – программа для создания и правки машинного кода. Она
![Язык гипертекстовой разметки Brackets – программа для создания и правки машинного кода.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1040422/slide-1.jpg)
очень популярна среди web-верстальщиков и специалистов, работающих в сфере Frontend-разработки. Утилита выделяет команды в документах, написанных на всех распространенных языках программирования, может отображать подсказки для HTML-тегов и других служебных команд, позволяет удобно редактировать большие объемы данных. Особого внимания заслуживает коллекция доступных для инсталляции расширений, в ней можно найти различные инструменты для комфортной работы и автоматизации шаблонных действий.
Слайд 4Язык гипертекстовой разметки
![Язык гипертекстовой разметки](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1040422/slide-3.jpg)
Слайд 5Язык гипертекстовой разметки
HTML
HyperText Markup Language
Язык гипертекстовой разметки
![Язык гипертекстовой разметки HTML HyperText Markup Language Язык гипертекстовой разметки](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1040422/slide-4.jpg)
Слайд 7Язык гипертекстовой разметки
HTML файлы имеют расширение .html и .htm.
Разметка состоит из набора
![Язык гипертекстовой разметки HTML файлы имеют расширение .html и .htm. Разметка состоит](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1040422/slide-6.jpg)
различных тегов и у тегов есть атрибуты.
Слайд 8HTML теги
Набор тегов создаёт иерархическое дерево на нашей странице.
Одинарные и парные.
<тег> -
![HTML теги Набор тегов создаёт иерархическое дерево на нашей странице. Одинарные и](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1040422/slide-7.jpg)
одинарный тег
<тег>… тег> - парный тег
У тегов могут быть атрибуты, это дополнительные параметры.
Слайд 9HTML теги
Теги можно вкладывать друг в друга.
![HTML теги Теги можно вкладывать друг в друга.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1040422/slide-8.jpg)
Слайд 10HTML теги
Основные типы тегов:
Блочные – занимают всю ширину страницы или блока и
![HTML теги Основные типы тегов: Блочные – занимают всю ширину страницы или](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1040422/slide-9.jpg)
начинаются сновой строки
Строчные – занимают сколько им необходимо места и идут в одну строку
Слайд 15Настройка инструмента
Выбор темы экрана
![Настройка инструмента Выбор темы экрана](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1040422/slide-14.jpg)
Слайд 16Настройка инструмента
Размер шрифта
![Настройка инструмента Размер шрифта](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1040422/slide-15.jpg)
Слайд 17Настройка инструмента
Выбор шрифта
![Настройка инструмента Выбор шрифта](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1040422/slide-16.jpg)
Слайд 18Настройка инструмента
Номер строк и Заворачивать строки
![Настройка инструмента Номер строк и Заворачивать строки](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1040422/slide-17.jpg)
Слайд 19Настройка инструмента
Автоматически закрывать скобки
![Настройка инструмента Автоматически закрывать скобки](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1040422/slide-18.jpg)
Слайд 20Настройка инструмента
Тип файла и Кодировка
![Настройка инструмента Тип файла и Кодировка](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1040422/slide-19.jpg)
Слайд 21Настройка инструмента
Плагин emmet
![Настройка инструмента Плагин emmet](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1040422/slide-20.jpg)