Введение в серию «Веб-разработка для абсолютных новичков» 0:07 Серия предназначена для новичков в веб-дизайне и веб-разработке. Каждое видео посвящено отдельной теме. В этом видео акцент на HTML, затем будут рассмотрены CSS и JavaScript.
Цели и формат видео 1:04 Видео создано для тех, кто ничего не знает о веб-разработке. Фокус на синтаксисе HTML, а не на стилизации. Использование только стандарта HTML 5.
Важность терпения 2:03 Обучение веб-разработке требует терпения и удовольствия от процесса. Не стоит ожидать быстрого обучения.
Что такое HTML 2:48 HTML — это язык гипертекстовой разметки, а не язык программирования. Используется для отображения и форматирования веб-страниц. Не содержит логики и программирования.
Роль HTML в веб-разработке 3:32 HTML — строительный блок Интернета. Можно создать сайт только с HTML и CSS. Презентационные сайты без JavaScript и PHP.
Необходимое оборудование 4:47 Для работы нужны браузер и текстовый редактор. Рекомендованный браузер — Google Chrome. Текстовый редактор — Sublime Text.
Установка Sublime Text 5:42 Инструкция по установке Sublime Text. Возможность бесплатной пробной версии.
Создание HTML-файла 7:12 HTML-файл можно создать локально без сервера. Домашняя страница должна называться index.html. Создание папки и файла для шпаргалки.
Настройка расширения файла 9:00 В Windows нужно отключить скрытие расширений файлов. Проверка и изменение расширения файла.
Открытие HTML-файла в Sublime Text 9:56 Открыть HTML-файл в Sublime Text можно через контекстное меню или через меню «Файл». Набрать текст «привет, мир» без тегов и сохранить файл.
Просмотр HTML-файла в браузере 10:40 Открыть файл в браузере Chrome. Текст «привет, мир» без HTML-тегов будет отображаться в браузере.
Основы HTML-тегов 11:11 HTML-теги — основной строительный блок веб-страницы. Теги форматируют способ отображения информации и текста. Примеры тегов: <h1>, <p>, <br>.
Структура HTML-документа 12:20 Структура HTML-документа включает область головы и область тела. В области головы находятся заголовок страницы, ссылки на CSS и JavaScript, метаданные. В области тела находится фактическая разметка, которая будет отображаться в браузере.
Тип документа и стандарты HTML 13:21 Тип документа <!DOCTYPE html> сообщает браузеру, в каком формате написан HTML. Стандарт HTML 5. Упоминание других стандартов HTML 4.01 и XHTML.
Создание структуры HTML-документа 14:20 Добавить тип документа <!DOCTYPE html>. Использовать теги <head> и <body>. В Sublime Text можно автоматически создавать теги с помощью клавиш.
Инструменты разработчика в Chrome 16:25 Открыть инструменты разработчика по клавише F2. Консоль JavaScript и сетевое взаимодействие. Вкладка «Элементы» показывает HTML-код.
Комментарии в HTML 17:24 Комментарии в HTML начинаются с восклицательного знака и двух дефисов. Комментарии не анализируются браузером.
Теги заголовков 17:36 Шесть тегов заголовков: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Изменение размера заголовков с помощью CSS.
Работа с абзацами и стилями 19:47 Абзацы имеют стиль по умолчанию, включая блок отображения и отступы. Отступы в CSS измеряются в em или m. Инструменты разработчика в Chrome помогают анализировать стили элементов.
Стили абзацев 20:40 Таблица стилей браузера по умолчанию определяет стиль абзаца. Margin — это расстояние между элементами, которое можно настроить в CSS. По умолчанию абзацы имеют отступы сверху и снизу, но нулевые слева и справа.
Встроенные и блочные элементы 21:58 Встроенные элементы не начинают новую строку и занимают только необходимую ширину. Блочные элементы начинают новую строку и занимают всю ширину строки. Примеры блочных элементов: div, заголовки, абзацы, формы. Примеры встроенных элементов: интервалы, изображения, ссылки.
Теги для выделения текста 22:58 Strong выделяет текст жирным шрифтом по умолчанию, но можно настроить в CSS. Em подчёркивает текст курсивом по умолчанию. Эти теги заменяют старые жирные теги, которые больше не рекомендуются.
Ссылки и атрибуты 24:00 Ссылка создаётся с помощью тега a и атрибута href. Атрибут target позволяет открыть ссылку в новой вкладке, не покидая текущий сайт. Атрибуты форматируются как пары ключ-значение и заключаются в кавычки.
Списки 26:35 Неупорядоченный список ul использует теги li для каждого элемента списка. Упорядоченный список ol заменяет маркированные точки цифрами. Неупорядоченные списки часто используются для навигации по веб-сайту.
Таблицы 28:38 Табличный тег table содержит заголовок и основную часть таблицы. Основные теги таблицы: заголовок, тело. Таблицы используются для организации данных на веб-страницах.
Создание таблицы 29:38 Добавление заголовков столбцов: «Имя», «Адрес электронной почты», «Возраст». Использование тегов «tr» и «td» для создания таблицы. Настройка отступа для удобства просмотра таблицы.
Ввод данных в таблицу 30:36 Ввод данных в ячейки таблицы: имя, адрес электронной почты, возраст. Пример ввода данных: «Брэд», «brad@example.com», 35 лет. Копирование и вставка данных для создания нескольких строк таблицы.
Рекомендации по использованию таблиц 31:41 Таблицы следует использовать только для табличных данных, а не для макета сайта. Для верстки сайта рекомендуется использовать CSS.
Основы работы с формами 33:03 HTML позволяет создать внешний вид формы, но не её функциональность. Для функциональности формы требуется PHP или другой язык программирования. Атрибут «action» направляет форму на определённую страницу.
Методы отправки данных 34:00 Метод «post» используется для добавления данных в базу данных. Метод «get» менее безопасен, но подходит для поиска.
Создание полей формы 35:07 Добавление меток и входных данных в форму. Использование атрибутов «type» и «name» для входных данных. Разделение элементов формы с помощью CSS и тега «hr».
Работа с текстовой областью и электронной почтой 37:24 Использование тега «textarea» для увеличения размера текста. Применение типа «email» для проверки адресов электронной почты.
Создание списка выбора 38:37 Создание списка выбора с вариантами «мужчина», «женщина» и «другой». Добавление значений и текста для каждого варианта.
Работа с числовым полем и полем даты 39:42 Добавление числового поля с типом «number». Создание поля даты с типом «date». Демонстрация работы полей с предопределёнными значениями и стрелками для переключения.
Заполнители в HTML 5 40:37 В HTML 5 добавлены заполнители, которые упрощают работу с формами. До HTML 5 для скрытия заполнителей использовался JavaScript. Пример использования заполнителя: «введите 1-е имя».
Кнопка отправки формы 41:28 Добавление кнопки «Отправить» с именем и значением. Кнопка отправляет данные в процесс PHP. Возможность размещения кнопок вне форм.
Кнопки и JavaScript 42:08 Для взаимодействия с кнопками вне форм требуется JavaScript. HTML — это язык разметки, который использует другие языки для динамичности.
Тег изображения img 43:02 Тег img является самозакрывающимся. Установка атрибута источника для загрузки изображения. Пример загрузки изображения из той же папки.
Атрибут alt для изображений 44:54 Атрибут alt отображает текст вместо изображения, если оно не найдено. Пример отображения текста при ошибке загрузки изображения.
Атрибуты ширины и высоты для изображений 45:26 Настройка ширины изображения с помощью атрибутов. Автоматическая установка высоты изображения. Возможность изменения высоты изображения.
Ссылка на изображение 46:34 Обертывание изображения в ссылку для открытия в браузере. Браузеры могут открывать различные типы файлов.
Цитаты в HTML 47:29 Использование тега blockquote для блоковых цитат. Пример цитаты из интернет-магазина traversymedia. Стилизация цитат с помощью CSS.
Аббревиатуры и сокращения 48:40 Тег abbr для сокращений, например, WWW. Подчёркивание аббревиатуры при наведении курсора. Пример сокращения «ускоренный курс HTML» Брэда Траверси.
Введение в HTML и семантические теги 48:55 Обсуждение основных HTML-тегов и элементов. Введение в пять семантических тегов HTML: заголовок, навигационный тег, раздел, статья, боковая часть, нижний колонтитул. Объяснение их значения для браузера и разработчика.
Создание новой HTML-страницы 50:02 Начало работы над новой HTML-страницей в Sublime Text. Добавление doctype, HTML-тегов head и других элементов. Создание ярлыка для HTML-вкладки в Sublime Text.
Добавление заголовка и раздела 50:58 Добавление заголовка с текстом «Мой веб-сайт». Создание раздела для основной области веб-страницы.
Создание статей в блоге 51:55 Добавление тегов для статей и записей в блоге. Использование тега small для дат и дополнительного контента. Добавление контента в статьи и создание ссылок на полный текст поста.
Создание боковой панели и навигации 53:47 Добавление боковой панели с категориями сообщений в блоге. Использование навигационных тегов HTML для оформления навигации.
Добавление нижнего колонтитула 54:39 Добавление тегов нижнего колонтитула и абзаца с текстом «Авторское право». Использование символа копирайта для обозначения авторских прав.
Стилизация заголовков и нижнего колонтитула 56:19 Добавление стилей для заголовков и нижнего колонтитула. Выравнивание текста по центру, изменение цвета фона и текста, добавление отступов.
Добавление мета-тегов 57:36 Добавление мета-тегов для описания страницы и ключевых слов. Пример описания страницы: «Это потрясающий блог от traversy media». Пример ключевых слов: «веб-дизайн», «блог веб-дизайнера», «блог веб-разработчика».
Связывание страниц 59:33 Добавление ссылок для перехода между страницами. Проверка работы навигации между страницами.
Заключение 1:00:31 Подведение итогов и приглашение к подписке. Обещание более продвинутых тем в будущих видео.
