Друзья, запись получилась не очень качественной, хардвер не вывез нагрузки, исправимся! 🙏
Презентация - https://disk.yandex.ru/i/i-z7tkIIoAS8-Q
Полезные материалы
Документация
https://developer.mozilla.org/en-US/docs/Web - все про HTML (теги, атрибуты), CSS и JS
https://doka.guide/ - сборник всего полезного с доходчивым объяснением. Теги HTML поделены по категориям
Редакторы
https://codepen.io/pen
https://stackblitz.com/
https://codesandbox.io
https://vscode.dev/
Версионирование (Git)
https://github.com/ - используют для опенсорса, мы тоже будем его использовать
https://about.gitlab.com/ - популярен среди корпоративных решений, умеет в селфхост
https://gitverse.ru - сбер)
https://sourcecraft.dev - яндекс)
https://learngitbranching.js.org/?locale=ru_RU - визуальная обучалка гиту
Расширения для VSCode
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens - очень пригодится при работе с Git
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow - радужная подсветка отступов)
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer - чтобы локально поднимать HTML код в браузере
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode - форматирует код под единый стандарт. Бест-практис в индустрии
https://marketplace.visualstudio.com/items?itemName=EthanHouseworth.sludgevs - без комментариев
https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets - милые зверюшки
HTML основы
Понятие элемента и тега
Тег — элемент языка разметки гипертекста. Каждый тег обозначает какую-то сущность: заголовок, список, абзац текста, изображение <имя_тега>...</имя_тега> Теги бывают открывающие, закрывающие; парные и одиночные.
Атрибуты
Атрибуты — это дополнительные настройки тегов, при помощи которых можно изменять свойства и поведение элемента. У каждого тега есть обязательные и необязательные атрибуты, их может быть несколько или не быть вовсе.
Поток
Поток — это принцип организации элементов на странице при отсутствии стилей.
Контекст формирования — правила расположения строчных и блочных элементов в нормальном потоке.
Блочные элементы в нормальном потоке располагаются друг под другом, а строчные — друг за другом, как слова в предложении. Элементы по умолчанию находятся в нормальном потоке. Но это поведение можно поменять при помощи некоторых CSS-свойств.
Вложенность
Придерживаясь некоторых правил, теги можно вкладывать друг в друга. При вложении следует соблюдать порядок их закрытия по принципу матрёшки. Проверить вложенность элементов можно через https://caninclude.glitch.me/
Семантика
Семантические теги
Семантическая вёрстка — подход к написанию HTML-разметки страниц, при котором разработчик опирается именно на смысловое предназначение каждого блока и логическую структуру страницы.
Семантика — это также основа доступных интерфейсов. Люди с ограниченными возможностями используют скринридеры и экранные лупы для чтения содержимого страницы. В этом случае семантическая HTML-разметка улучшает их пользовательский опыт и не создаёт барьеры, из-за которых люди с инвалидностью не могут пользоваться сайтом в принципе.
Заголовки
h1...h6 — определяют текстовые заголовки смысловых разделов разного уровня, которые указывают важность секции контента расположенного после них.
Списки
ol — тег упорядоченного списка. Используется для вёрстки перечня однотипных элементов, когда важен их порядок. Сами пункты списка размечаются при помощи тега li.
ul — тег неупорядоченного списка.
Форматирование текста
p создаёт тестовый блок, абзац: всё, что находится внутри него, начнётся с новой строки. b и strong — жирное начертание. Первый для привлечения внимания, второй — для выделения важности. i и em — курсивное начертание. del —зачеркнутый текст. u —подчеркнутый текст. br —перенос текста на другую строку.
Ссылки и кнопки
a - предназначен для создания ссылок, текста, при клике по которому переходим на другую страницу, скачиваем файл и т. п. Адрес ссылки задается в обязательном атрибуте href="адрес". Атрибут download="имя файла" сообщает браузеру, что указанный ресурс должен быть загружен в момент, когда пользователь кликнет по ссылке.
button — интерактивный элемент, который оживляется при помощи JavaScript. Например, кнопка открытия и закрытия всплывающего окна, переключения мобильного меню или отправки формы. Необходимо явно указывать атрибут type. Его значение по умолчанию - submit, но чаще всего нужно значение button.
Изображения
img добавляет изображение на страницу. В атрибуте src='адрес' указывается адрес картинки. В атрибуте alt='описание' указывается описание картинки.
figure используется для вёрстки иллюстраций, изображений или другого автономного содержимого, которое может иметь поясняющую подпись в виде тега figcaption
Универсальные теги
div — блочный элемент группирует или оборачивает другие элементы и семантически ничего не значит. Можно представить этот тег как универсальную коробку. В неё можно положить что угодно или не класть ничего и просто оформить как нужно.
span — строчный элемент без семантического значения. С помощью тега можно выбрать часть текста или другой информации в блоке и стилизовать её.
Семантическая разметка
Основные теги: header, aside, main, nav, article и zooter
Формы
Основные теги
тег form и его атрибуты
<form> добавляет на страницу форму, которую пользователь может заполнить.
action — атрибут, здесь указывается ссылка на скрипт, который обработает форму.
method='get' — атрибут, может определять, каким способом будут отправлены на сервер данные, которые ввёл пользователь. Есть два варианта: get и post.
тег label
<label> используется для создания подписи к элементу формы.
for — значение этого атрибута должно соответствовать значению атрибута id связываемого элемента (обычно <input>). Первый же элемент в документе, чей id будет совпадать со значением атрибута for, становится связанным с нашим <label>
тег input и его атрибуты
type — тип элемента <input>: текстовое поле, кнопка, флажки выбора и так далее. Если не указать его, то элемент будет обычным текстовым полем text в одну строку.
Основные значения атрибута: text, email, password, date, checkbox, radio, submit
value — значение элемента <input>, которое отправляется на сервер в формате имя=значение.
name — уникальное имя элемента. Обычно имя нужно, чтобы связать <input> с формой и отправить данные на сервер.
placeholder - атрибут подсказывает пользователю, что именно нужно ввести в поле ввода. Выглядит как бледный текст внутри поля (как будто оно уже заполнено), но при наведении курсора исчезает.
select, option
<select> используется, когда нужно показать выпадающий список.
<option> — одиночный пункт списка.
Пункт списка будет выбран по умолчанию, если есть атрибут selected.
Пункт списка нельзя выбрать, если установлен атрибут disabled.
textarea
<textarea> используется для создания многострочного поля ввода. Например, поля ввода комментария. При необходимости поле может иметь изменяемый размер.
disabled — поле отключается для взаимодействия с пользователем
maxlength/minlength — макс/мин число символов в поле
cols задаёт ширину поля ввода в символах
rows задаёт высоту поля ввода в строках