HTML/CSS. Основы верстки сайтов. Индивидуально

Идет набор на курс!
Срок обучения
34 ак. часов
Стоимость:
Стоимость за весь курс
11 000 грн.
Описание
HTML/CSS. Основы верстки сайтов. Индивидуально

Преимущества курса:
В ходе изучения курса «HTML/CSS.Основы верстки сайтов» слушатель получит представление о системе работы сети Интернет, о том, из чего состоит сайт, научится работать с гипертекстом и создавать полноценные веб-страницы, наполненные текстовым, графическим и мультимедийным контентом. Также в курсе будут изучены каскадные таблицы стилей (CSS) – современное средство управления внешним видом сайта. За короткий срок слушатель сможет создать полноценный, современный статический веб-сайт.

Курс предназначен для слушателей, которые хотят научиться верстать несложные сайты с нуля. А также представлять на страницах своего сайта форматированные текстовые блоки, современные таблицы, графику и т.д. для того чтобы приступить к занятиям – достаточно владения компьютером на пользовательском уровне. Приветствуется знание английского языка и умение быстро набирать тексты на клавиатуре.

По окончании курса слушатели будут знать:
По окончании курса учащиеся будут разбираться в современных направлениях и тенденциях в сфере Web-технологий. Будут знать как устроена глобальная сеть Интернет, познакомятся с понятиями: клиент-сервер, протокол, гиперссылка и т.д. Разбираться в том, как устроена типовая веб-страница сайта, и какие обязательные элементы она содержит; научатся, управлять положением элементов на сайте и их внешним видом. 

По окончании курса слушатели будут уметь:

  • Работать с языком гипертекстовой разметки HTML и стилевыми таблицами CSS;
  • Изучат огромное количество html-элементов;
  • Научатся создавать и подключать основные элементы веб-страницы (текстовые и графические);
  • Научатся правильно оформлять различные элементы страницы с помощью CSS ;
  • Работать с веб-графикой – оптимизировать ее под нужный формат, подключать картинки и фоны;
  • Работать с текстовыми блоками, управлять их положением, шириной-высотой и оформлением;
  • Использовать навигацию на сайте: работать с гиперссылками, создавать различные виды меню.
  • Верстать полноценную веб-страницу по заданному макету с использованием элементов нового стандарта HTML5.
Дни недели занятий на выбор
Время занятий на выбор
Занятий в неделю
Длительность занятия 4 ак. часа
Часы занятий
Группы
Возраст аудитории Студенты, Взрослые
Вид подготовки Базовый курс
Город Шевченковский
Преподаватель специалист-практик
Учебные материалы
Пробное занятие
Документ об окончании Сертификат
Опции Индивидуальное обучение
Трудоустройство Нет
Условия трудоустройства

Запись на курс

Пользователи
Select people to associate with this registration.
This registration is for
Select person
Person type
New Контакт

Программа обучения

№

п/п 		Темы Занятия (содержание, подтемы) Часы
 1 Введение в Интернет-технологии. Краткая история сети Интернет и развития веб-технологий. 

Основные понятия и термины: HTML, http, web-сервер, web-клиент, браузер, URL, среда гипермедиа, гиперссылка, гипертекст. Технологические основы www. 

Схема работы веб-сайта. Определение веб-сайта и веб-страницы.

Браузеры (обзорно). Развитие версий языка HTML от 2.0 до 5.0.

Основные термины и понятия: тег, атрибут, элемент. Правила вложения и записи элементов.

Рассмотрение основных составных элементов: html, head, body, DOCTYPE.



Практическое занятие №1

Познакомится с основными элементами текстовой разметки

..

,

. 

Создать первую веб-страницу с текстовыми блоками и заголовками.



Домашнее задание

Установить у себя на компьютере любой html-редактор (Notepad++, Sublime и т.д) по выбору.

Создать веб-страницу – краткий рассказ о себе с использованием заголовков различного уровня и текстового блока.

  2
 2 Основные теги и введение в CSS. Изучение основных тегов разметки:
,
,
,
,
,
2
 3 Типографика на веб-страницах. Особенности форматирования текстов на страницах с помощью стилевых таблиц. Рассмотрение свойств: color, font-size, font-family, font-style, font-weight, font-variant, line-height, font, text-decoration, text-transform, text-align, vertical-align, text-indent, white-space, word-spacing, letter-spacing.

Цвет в CSS. Способы задания цвета. Веб-безопасная палитра.



Практическое занятие №3

Практика по разметке текстового фрагмента с использованием максимального количества различных свойств текста и шрифта.



Домашнее задание

Отформатировать отрывок из книги или статьи на выбранную тему, используя подключение стилевых свойств текста и шрифта. Назначить цвет фона страницы и цвета для заголовков и блоков текста c помощью CSS.		  2
 4 Списки в HTML и CSS) Список как способ упорядочивания информации на веб-страницах. Виды списков. Список определений. Сфера применения списков. Правила вложений. Ограничения.

Оформление списков через CSS.

Кодировки на веб-страницах. Основные сведения о кодировках и управлении ими.

Символьные подстановки.



Практическое занятие №4

Практическое задание по изученным темам. Создание списка товаров, списка группы и многоуровневого списка Сезоны года с оформлением через стили.



Домашнее задание

Оформить веб-страницу со списком литературы в домашней библиотеке. В тексте использовать наиболее популярные символьные подстановки.		  4
 5 Навигация и гиперссылки Понятие навигации на веб-страницах. Типы навигации.

Понятие URL и его детальное рассмотрение по отдельным элементам. 

Виды адресации: относительная и абсолютная. Особенности применения.

Элемент гиперссылка и его атрибуты.

Технология якорей. Ссылки внутри документа.



Практическое занятие №5

Создание многостраничного тематического сайта с общей навигацией в виде списка. Используем текстовое содержимое и графику. Созданиие объемной статьи, разделенной на главы и подразделы. Создание закладок в тексте и оглавления.



Домашнее задание

Самостоятельно добавить не менее 5-ти страниц в свой созданный сайт, прописать ссылки в меню, оформить все в одном стиле.		 4
6 Графика в WEB. Использование графики на веб-страницах. Особенности сетевой графики. Форматы, оптимизация, сжатие. Фоновая и встроенная графика.

Элемент , его особенности. Свойство background в CSS. Использование текстур в веб.

Теги
и .

Валидация кода. Проверка домашнего задания с помощью валидатора.

Понятие псевдокласса. Псевдоклассы гиперссылок.

Графические ссылки.



Практическое занятие №6

Создание фотогалереи на одной из страниц своего сайта. Связать все страницы сайта воедино. Использовать миниатюры изображений как графические ссылки.



Домашнее задание

Создать веб-страницу – каталог произведений искусства из любой эпохи по выбору с подписями и оформлением через стили. Желательно использование тегов
и .
  4
7 Таблицы в HTML и CSS Таблицы в веб как удобное средство для визуализации и представления информации.

Структура разметки таблиц. Теги , ,
.

Управление рамками таблиц, шириной, высотой и выравниванием таблицы. 

Физическое объединение ячеек.

Логическое объединение ячеек.

Новые свойства CSS для оформления таблиц.



Практическое занятие №7

Создаем красивые, стильные и современные таблицы с данными. Оформляем рамки, фон, прозрачность с помощью стилевых свойств.



Домашнее задание

Создать таблицу с параметрами мобильных телефонов различных производителей (не менее 4-х параметров). Оформить таблицу в современном стиле.		 3
8 Блочная модель в веб. Понятие Box Model. Блоки как кубики для построения сайта. 

Рассмотрение областей блочного элемента по очереди: контент, отступы, рамка, поля. Все соответствующие CSS свойства. Способы использования сокращенных свойств.

Специфика Box Model для строчных элементов/

Правило расчета ширины. Свойства width и height.

Визуальные свойства CSS. Переполнение, видимость, прозрачность. Свойство display.

Рассмотрение инструментальных средств браузеров: Google Developer Tools, Firebug, Dragonfly.



Практическое занятие №8

Практика: создание нескольких блоков и применение к ним свойств блочной модели.

Создание 2-х, 3-х и 4-х колонок с текстовым контентом. Настройка границ, отступов, полей.



Домашнее задание

Создать галерею изображений – упрощенные карточки товаров в интернет-магазине с фото, подписью и параметрами.		  4
9 Плавающая модель в верстке сайтов.

Свободное позиционирование.		 Обзор моделей верстки. Понятие «потока». Плавающая модель. Свойство float.

Свободное позиционирование. Свойство position. Свойства top, left, right, bottom.



Практическое занятие №9

Верстка двухколоночного и трехколоночного макета средствами плавающей модели.



Домашнее задание

Сверстать макет главной страницы сайта по предложенному изображению. Для контента использовать материалы из коллекции слушателя.		  4
10 Верстка макета в режиме мастер-класс Верстка макета в режиме мастер-класса с обсуждением и комментированием всех интересных мест.

Последовательность верстки.

Организация файлов и папок.

Глобальный сброс – решаем проблему кроссбраузерности.

Работа со шрифтами. Подключение сторонних шрифтов. Свойство @font-face. Подключаем библиотеку Google web-fonts.



Практическое занятие №10

Верстка макета landing page с использованием плавающей модели и свободного позиционирования.



Домашнее задание

Сверстать «шапку» header заданной страницы сайта с использованием новых элементов стандарта html5. подключить выбранный логотип компании (Преимуществом будет подготовка логотипа в одном из редакторов графики). Подготовка к экзамену.		  3
11 Экзамен. Экзаменационная работа.

Сдача электронного теста.

Сдача практической части экзамена состоит в представлении и защите сайта-визитки, созданного слушателем на протяжении обучения для самого себя либо для компании, в которой он работает.		  2
Курс проводитПроминь
Адрес:
  • г. Харьков, пер. Кравцова 19 (офис 21)