Курс з HTML + CSS. Основи верстки сайтів. Індивідуальне навчання.

Введення в Інтернет-технології.

• Коротка історія мережі Інтернет і розвитку веб-технологій.
• Основні поняття і терміни:
  • HTML
  • web - сервер
  • web- клієнт
  • браузер
  • URL
  • середовище гіпермедіа
  • гіперпосилання
  • гіпертекст

Технологічні основи www.

• Схема роботи веб-сайту. Визначення веб-сайту і веб-сторінки.
• Браузери (оглядовий). Розвиток версій мови HTML від 2.0 до 5.0.
• Основні терміни і поняття : тег, атрибут, елемент. 
• Правила вкладення і запису елементів.
• Розгляд основних складових елементів: html, head, body, DOCTYPE

Практичне зайняття №1. 

• Познайомиться з основними елементами текстової розмітки <h1> . <h6>, <p>. 
• Створити першу веб-сторінку з текстовими блоками і заголовками.

Домашнє завдання. 

• Встановити у себе на комп'ютері будь-який html- редактор (Notepad, Sublime і т.д) по вибору.
• Створити веб-сторінку.
• Коротка розповідь про себе з використанням заголовків різного рівня і текстового блока.

Основні теги і введення в CSS.

• основних тегів розмітки:
  • <address>
  • <blockquote>
  • <header>
  • <footer>
  • <article>
  • <nav>
  • <aside>
  • <div>
  • <em>
  • <strong>
  • <abbr>
  • <cite>
  • <q>
  • <dfn>
  • <span>
• Класифікація елементів: блоково-рядкові, логічно-фізичні. Правила їх застосування.
• Підключення стильових таблиць. Поняття про CSS, способи підключення. Селектори.
• Особливості синтаксису.

Практичне зайняття №2. Створення сторінки з оголошенням про семінар з використанням вивчених тегів.

Домашнє завдання. 

Створити сторінку новин з використанням тегів логічної розмітки і оформити її за допомогою стильових властивостей (фон, колір шрифту).

Використати глобальні і внутрішні стилі.

Типографіка на веб-сторінках.

• Особливості форматування текстів на сторінках за допомогою стильових таблиць. 
• Розгляд властивостей:
  • 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.

Списки в HTML і CSS.

•  Список як спосіб впорядковування інформації на веб-сторінках.
•  Види списків. Список визначень. Сфера застосування списків. Правила вкладень. Обмеження.
• Оформлення списків через CSS.Кодування на веб-сторінках. 
• Основні відомості про кодування і управління ними. Символьні підстановки.

Практичне зайняття №4. 

Практичне завдання по вивчених темах. 

Створення списку товарів, списку групи і багаторівневого списку.

Сезони року з оформленням через стилі.

Домашнє завдання. 

Оформити веб-сторінку зі списком літератури в домашній бібліотеці. 

У тексті використати найбільш популярні символьні підстановки.

Навігація і гіперпосилання.

• Поняття навігації на веб-сторінках. Типи навігації.
• Поняття URL і його детальний розгляд по окремих елементах.
• Види адресації : відносна і абсолютна. Особливості застосування.
• Елемент гіперпосилання і його атрибути.
• Технологія якорів. Посилання усередині документу.

Практичне зайняття №5. 

• Створення багатосторінкового тематичного сайту із загальною навігацією у вигляді списку. 
• Використовуємо текстовий вміст і графіку. 
• Створення об'ємної статті, розділеної на глави і підрозділи. 
• Створення закладок в тексті і змісту

Домашнє завдання. 

Самостійно додати не менше 5-ти сторінок у свій створений сайт, прописати посилання в меню, оформити все в одному стилі.

Графіка в WEB. 

• Використання графіки на веб-сторінках. Особливості мережевої графіки. 
• Формати, оптимізація, стискування. Фонова і вбудована графіка.
• Елемент <img>, його особливості. Властивість background в CSS. Використання текстур у веб.
• Теги <figure> і <figcapture>.
• Валідація коду. Перевірка домашнього завдання за допомогою валідатора.
• Поняття псевдокласу. Псевдокласи гіперпосилань.
• Графічні посилання.

Практичне зайняття №6. 

• Створення фотогалереї на одній із сторінок свого сайту. Зв'язати усі сторінки сайту воєдино. 
• Використати мініатюри зображень як графічні посилання.

Домашнє завдання. 

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

Бажане використання тегів <figure> і<figcapture>.

Таблиці в HTML і CSS

• Таблиці у веб як зручний засіб для візуалізації і представлення інформації.
• Структура розмітки таблиць. Теги <table>, <tr>, <td>.
• Управління рамками таблиць, шириною, заввишки і вирівнюванням таблиці.
• Фізичне об'єднання осередків.
• Логічне об'єднання осередків.
• Нові властивості CSS для оформлення таблиць.

Практичне зайняття №7. 

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

Домашнє завдання. 

• Створити таблицю з параметрами мобільних телефонів різних виробників (не менш 4-х параметрів). 
• Оформити таблицю в сучасному стилі.

Блокова модель у веб. 

• Поняття Box Model. Блоки як кубики для побудови сайту.
• Розгляд областей блокового елементу по черзі: контент, відступи, рамка, поля. Усі відповідні CSS властивості. 
• Способи використання скорочених властивостей.
• Специфіка Box Model для рядкових елементів/
• Правило розрахунку ширини. Властивості width і height.
• Візуальні властивості CSS. Переповнювання, видимість, прозорість. Властивість display.
• Розгляд інструментальних засобів браузерів : Google Developer Tools, Firebug, Dragonfly.

Практичне зайняття №8. 

• Практика: створення декількох блоків і застосування до них властивостей блокової моделі.
• Створення 2-х, 3-х і 4-х колонок з текстовим контентом. 
• Налаштування меж, відступів, полий

Домашнє завдання. 

Створити галерею зображень - спрощені картки товарів в інтернет-магазині з фото, підписом та параметрами.

Плаваюча модель у верстанні сайтів.

• Вільне позиціонування Огляд моделей верстання. Поняття "потоку". Плаваюча модель. Властивість float.
• Вільне позиціонування. Властивість position. Властивості top, left, right, bottom.

Практичне зайняття №9. 

Верстання двухколоночного і трехколоночного макету засобами плаваючої моделі.

Домашнє завдання. 

Верстати макет головної сторінки сайту по запропонованому зображенню. 

Для контенту використати матеріали з колекції слухача.

Верстання макету в режимі майстер-клас 

• Верстання макету в режимі майстер-класу з обговоренням і коментуванням усіх цікавих місць.
• Послідовність верстання.
• Організація файлів і тек.
• Глобальне скидання - вирішуємо проблему кроссбраузерности.
• Робота з шрифтами. Підключення сторонніх шрифтів. Властивість @font - face. 
• Підключаємо бібліотеку Google web - fonts.

Практичне зайняття №10. 

Верстання макету landing page з використанням плаваючої моделі і вільного позиціонування.

Домашнє завдання. 

Верстати "шапку" header заданої сторінки сайту з використанням нових елементів стандарту html5. 

Підключити вибраний логотип компанії (Перевагою буде підготовка логотипу в одному з редакторів графіки).

Підготовка до екзамену.

Іспит. Екзаменаційна робота. Здача електронного тіста.

Здача практичної частини іспиту полягає в уявленні і захисті сайту-візитки, створеного слухачем упродовж навчання для самого себе або для компанії, в якій він працює.