Курс 1 HTML. За 1 час от полного новичка до новичка с начальными знаниями HTML. Видео.

Видео

Код youtube для установки на сайт или блог

Описание видео

Этот курс для вас, если вы новичок в веб программировании, но хотите стать профессионалом в этой интересной и перспективной отрасли.

Если вас интересует определенная тема, вашему вниманию предлагаю таймлайн:

1:40 Предварительная подготовка к прохождению курса. 
https://wpvi.ru/pages/html/intro/

2:00 Краткая история HTML 
3:15 Война стандартов XHTML и HTML5 
5:00 Победа HTML5 
5:35 В чем сила HTML5, брат? 
6:12 Технологии Фронтенд (Front-end) и Бакенд (Back-end). 
8:12 HTML отвечает на вопросы: Кто? Что? 
8:24 CSS отвечает на вопросы: Какой? Какая? Какие свойства? Сколько лет? 
8:44 JavaScript отвечает за динамику. 
8:59 Примеры - аналоги для лучшего понимания сути Фронтенда (HTML+CSS+JavaScript) 
14:01 Концепция курса: теория вместе с практикой. 
15:20 Страница "чистый макет". HTML валидатор. HTML код. Версия 1.01. 
15:45 Запуск редактора Visual Studio Code из командной строки (команда code) 
17:45 Работаем над файлом index.html в папке d:\vsc\html_course1\ 
20:50 Открытие сайта версии 1.01 в браузере с помощью команды Open with Live Server Alt+L Alt+O 
21:40 Проверка HTML кода валидатором. 
23:48 Особенность HTML, которая порадует новичков в программировании и огорчит опытных программистов. 
24:32 !DOCTYPE html - обязательная преамбула, самый первый элемент. Используйте !DOCTYPE html как первую строчку в любом файле *.html. 
27:55 Термины: "элемент" и "тег". 
28:41 HTML-элемент html - корневой элемент. Пример: html lang="ru" 
29:10 Атрибуты dir и lang 
33:00 Редактор VS Code - наглядно показывается, это элементом html все начинается и все заканчивается. А внутри html - head и body 
33:39 HTML-элемент head содержит машиночитаемую информацию (metadata) о документе 
35:33 HTML-элемент meta с атрибутом "charset". 
37:40 HTML-элемент titleЗаголовок/title Текст, который отображается в заголовке окна браузера или на вкладке страницы. 
38:19 HTML-элементы meta с атрибутами "name" и "content". 
39:50 meta name="description" content="Краткое описание." / - это строка, в которой разработчики могут объяснить, что делает приложение или краткое содержание страницы. 
40:04 meta name="keywords" content="ключевые слова" / - список ключевых слов, соответствующих содержимому страницы сайта. 
40:51 meta name="viewport" content="width=device-width,initial-scale=1"/, meta name="HandheldFriendly" content="true" /, meta name="MobileOptimized" content="width" /, meta name="apple-mobile-web-app-capable" content="yes" /. 
42:19 HTML-элемент body - контент документа HTML. Второй в элементе html. 
43:09 HTML-элемент header - содержит вводный контент родительского элемента. Не путайте элементы header и head. 
43:50 Практическая работа. Вносим в наш файл index.html изменения (пусть, это будет версия 1.02). Добавляем элемент header. 
47:12 Глобальные атрибуты: id, class, style. 
51:22 HTML-элементы main (основной контент) и footer (нижний колонтитул) 
52:30 HTML код. Версия 1.03. Добавляем в body элементы: main, footer. 
56:00 HTML код. Версия 1.04. HTML-элемент main - наполняем контентом. 
57:21 HTML-элемент div - универсальный контейнер. Самый популярный блочный элемент. 
58:52 HTML-элемент p - Paragraph. Параграф. Абзац. 
59:59 HTML-элемент br - Break or Carriage-return. Возврат Каретки. Как правильно: br или br / ? 
1:01:53 HTML-элементы h1 - h6 - 6 уровней заголовков. Неожиданная разница в использовании в div и article. 
1:03:15 HTML-элемент img - встраивает изображение в документ. 
1:07:03 HTML-элементы table - таблица 
1:08:46 HTML-элемент hr - рисует горизонтальную прямую линию. 
1:09:18 HTML-элементы aside - блок с вспомогательным содержимым 
1:10:05 HTML-элемент span - универсальный строчный контейнер 
1:10:54 HTML-элементы a - гиперссылка для перехода 
1:12:01 HTML-элемент form - форма для ввода информации 
1:13:25 HTML-элементы mark - выделение текста, похожие: strong, b, em, i 
1:15:08 HTML-элемент audio - встраивание звукового контента в документ 
1:16:46 HTML-элементы video - встраивание видео контента в документ 
1:18:55 HTML-элемент article - статья, фрагмент текста, самостоятельная часть документа 
1:20:17 HTML-элементы ul (неупорядоченный список) и ol (упорядоченный список) 
1:21:06 HTML-элемент pre - предварительно отформатированный текстовый элемент 
1:21:50 Ссылки на разные версии справочника элементов HTML, варианты макетов HTML страниц. 
1:22:09 Чистый HTML (без CSS, без атрибутов style) 
1:23:35 О том, что будет дальше.

На этом все.

Спасибо за внимание и успехов в программировании.

###

Курс 1 HTML (в текстовом формате)

... или ...

Посмотреть это видео на сайте youtube через домен www.youtube.com:
https://www.youtube.com/watch?v=VAvlhD3dLP0

... или ...

Посмотреть это видео на сайте youtube через домен youtu.be:
https://youtu.be/watch?v=VAvlhD3dLP0

... или ...

Посмотреть список всех видео на сайте www.youtube.com:
https://www.youtube.com/channel/UCrkp4mgrDi2Pnux9hLT_1pQ/videos

... или ...

список видео на сайте wpvi.ru ➳

... или ...

карта сайта wpvi.ru (список всех страниц) ➳

... или ...

перейти на главную страницу сайта ➳