Основы HTML и CSS

После просмотра бесплатного обучающего видеокурса «Основы HTML и CSS» Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает. Сделайте первый шаг к созданию своего сайта!

Изучив данный видеокурс, Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS. И самое главное — Вы заложите фундамент для своего дальнейшего развития в деле веб-разработки.

Содержание видеокурса «Основы HTML и CSS»:

Видеоурок 1. Общий механизм работы сайтов и суть языка HTML

  • Этапы отображения любого сайта
  • Что такое HTML
  • Для чего используется HTML
  • Что такое HTML-тэги, и в чем их смысл
  • Как браузер анализирует код страницы и выводит веб-страницу на экран
  • Почему не следует использовать HTML для визуального оформления веб-страницы

Видеоурок 2. Структура HTML-документа и первая страница

  • Какую программу вы можете использовать для написания кода
  • Какие элементы обязательно должны присутствовать в любом HTML-документе
  • Что такое парные и непарные тэги
  • Как быть с некорректным отображением кириллических символов
  • Как задать кодировку для веб-страницы и для самого HTML-файла
  • Что такое META-тэги и какие из них наиболее важные
  • Что такое тип документа, и зачем он нужен

Видеоурок 3. Особенности работы базовых тэгов и правило вложенности

  • Использование тэгов параграфа и переноса строки
  • Выделение частей текста жирным начертанием и курсивом
  • Понятие вложенности тэгов
  • Надстрочный и подстрочный индексы

Видеоурок 4. Комментарии, строчные и блочные элементы. Плагин Firebug

  • Как посмотреть исходный код любой страницы сайта
  • Для чего нужны комментарии, и как их использовать
  • Какой тэг нужно использовать для отображения текста на странице "как есть"
  • Тэги span и div
  • Отличие строчных элементов от блочных
  • Плагин Firebug для просмотра структуры web-страницы

Видеоурок 5. Изучаем спецсимволы, списки и таблицы

  • Что такое спецсимволы, и для чего их использовать
  • Что такое мнемоники, и для чего они созданы
  • Создание списков
  • Работа с таблицами, объединение строк и ячеек

Видеоурок 6. Ссылки, url-адреса и понятие атрибута

  • Что такое атрибуты и зачем они нужны
  • Обязательные и необязательные атрибуты
  • Создание гипертекстовых ссылок. Открытие ссылки в новой вкладке
  • Ссылка на определенное место в документе
  • Виды URL-адресов. Отличие абсолютного адреса от относительного

Видеоурок 7. Работа с изображениями. Навигационная карта

  • Как вставить изображение на страницу
  • Обязательные и необязательные атрибуты для тэга img
  • Как указать размеры для изображения
  • Как сделать часть изображения ссылкой

Видеоурок 8. CSS. Введение: селекторы типа и селекторы класса

  • Что такое таблицы стилей, и для чего они применяются
  • В чем преимущества использования CSS перед стандартными HTML-средствами форматирования
  • Использование селекторов класса и типа
  • Разбор структуры CSS-правила (пара "свойство: значение")
  • Как применить стиль к определенному элементу на странице
  • Задание нескольких значений для одного CSS-свойства
  • Задание одного стиля для нескольких элементов разных типов

Видеоурок 9. Селекторы ID и селекторы потомков. Основные CSS-правила

  • Для чего используются селекторы идентификатора
  • Первичное позиционирование контента страницы с помощью свойства margin
  • Как избавиться от лишних отступов, которые автоматически создает браузер
  • Что такое селекторы потомка, и в чем смысл их использования

Видеоурок 10. Псевдоэлементы. Типы подключения CSS-стилей к документу

  • Понятие псевдоэлемента и примеры их использования
  • Встроенный тип подключения CSS-стилей
  • Внутреннее подключение стилей
  • Вынос CSS-стилей в отдельный файл (внешнее подключение)
  • В чем плюсы внешнего подключения файла стилей

Видеоурок 11. Создаем основу для простого двухколоночного CSS-макета

  • Создаем базовую структуру (HTML-разметку) для будущей страницы
  • Наполняем структуру контентом
  • "Раскрашиваем" блоки на странице в разные цвета для удобства работы
  • Избавляемся от "просветов" между блоками, используя технику обнуления отступов

Видеоурок 12. Дорабатываем двухколоночный CSS-макет

  • Как отцентровать содержимое страницы
  • Используем свойство float для позиционирования блоков на странице
  • Как избежать "наползания" одного блока не другой

Видеоурок 13. Создаем 3-колоночный макет на основе 2-колоночного

  • Заканчиваем с двухколоночным макетом
  • Дорабатываем внешний вид, используя внешние и внутренние отступы
  • Разбиваем блок контента на 2 части, формируя 3-колоночный макет из 2-х колоночного
  • Экспериментально подбираем ширину для колонок макета

Видеоурок 14. Для завершенности вносим в макет элементы дизайна

  • Создаем графическую "шапку" для сайта
  • Задаем картинку как фоновый рисунок для шапки страницы
  • Задаем окантовки для блоков на странице с помощью свойства border
  • Меняем фоновые цвета для различных элементов страницы
  • Учимся скруглять прямоугольные границы блоков

Бонус

  • Видеоурок по основам работы с Notepad++

Основы HTML и CSS
Автор: Дмитрий Науменко

Скачать видеокурс...(перейти на сайт автора)

Не работает ссылка? — Напишите нам об этом в комментариях.
Понравился материал? — Кликните по кнопкам ниже и расскажите о нём друзьям!

Внимание! Посетители, находящиеся в группе Гости, не могут оставлять комментарии. Зарегистрируйтесь или зайдите на сайт под своим логином.