Введення в Інтернет-технології.
- Коротка історія мережі Інтернет і розвитку веб-технологій.
- Основні поняття і терміни:
- 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.
Підключити вибраний логотип компанії (Перевагою буде підготовка логотипу в одному з редакторів графіки).
Підготовка до екзамену.
Іспит. Екзаменаційна робота. Здача електронного тіста.
Здача практичної частини іспиту полягає в уявленні і захисті сайту-візитки, створеного слухачем упродовж навчання для самого себе або для компанії, в якій він працює.
