Зміст курсу                

Модуль 1. Принципи створення HTML-сторінок. Використання HTML-редакторів для розробки гіпертекстових документів.

• Введення. Поняття гіпертекстового документа, броузера, тега. Типи HTML-Редакторів. Приклади документів HTML.

Визначення гіпертекстового документа, броузера, тега. Теги, що відкривають та закривають елементи. Поняття HTML-Документа. Сучасний стандарт HTML. Типи HTML редакторів (редактори тегів і WYSWYG-Редактори).

Практика: Перший документHTML (Hello, world)

• Гіперпосилання. Елемент А. Види й типи посилань.

Поняття гіперпосилання. Елемент А. Посилання усередині документа (якоря). Посилання на інші (зовнішні) документи. Посилання на адресу електронної пошти й груп новин.

Практика: Створення сторінки з використанням всіх типів посилань.

• Форматування документу. Елементи форматування. Правила синтаксису. Таблиці стилів. Елементи-контейнери.

Форматування й оформлення документів. Позначення абзацу в документі за допомогою елемента Р. Застосування елементу BR для створення нового рядка. Використання елементів H1, H2, H3, H4, H5 і H6 для позначення заголовків. Правила синтаксису. Приклад використання таблиць стилів CSS і контейнера DIV для форматування документу.

Практика: Приклад створення найпростішої сторінки з використанням елементів форматування й CSS .

• Каскадні таблиці стилів CSS. Створення й використання класів і ідентифікаторів елементів. Елемент STYLE.

Каскадні таблиці стилів CSS. Підключення таблиць стилів за допомогою елементів STYLE і LINK. Створення й використання класів елементів на прикладі класів для елемента Р (форматування). Створення й використання ідентифікаторів на прикладі елемента Р для оформлення документа. Огляд значень атрибутів TYPE і MEDIA для елемента LINK.

Практика: Створення документу з використанням різних способів підключення CSS.

• Додаткові рекомендації для створення Web-сторінок.

Оптимальний розмір сторінки. Розміри об'єктів і відступи між ними. Правильне використання кольорів і основні правила оформлення. Особливості використання шрифтів. Зміст і єдність стилю багатосторінкового сайту. Публікація й перевірка готового сайту на сервері.

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

 Модуль 2. Мова розмітки HTML

• Структура HTML-Документа. Елементи HTML, HEAD, TITLE, META.

Структура HTML-документу (інформація про версію HTML, блок заголовка, тіло документа). Огляд типів документів. Використання контейнерів HTML, HEAD і BODY для позначення структури документа. Роль елементів TITLE і META для опису змісту й деяких властивостей документа.

Практика: Заповнення основних властивостей документу в елементі META. Створення документа з автоперезавантаженням.

• Контейнер BODY. Елементи, що групують. DIV і SPAN. Елементи-заголовки H1, H2, H3, H4, H5, H6. Елемент ADDRESS

Контейнер BODY, його власні атрибути. Визначені події для всього документа. Елементи, що групують на рівні блоку (DIV) і рівні тексту (SPAN). Виділення назв розділів документів за допомогою елементів H1-H6. Надання контактної інформації за допомогою елемента ADDRESS.

Практика: Оформлення тексту, що містить розділи, використовуючи контейнери DIV, SPAN  і заголовки H1-H6.

• Документи з фреймами. Елементи FRAMESET, FRAME, NOFRAMES, IFRAME.

Поділ робочої області броузера на кілька окремих вікон за допомогою елемента FRAMESET. Приклад розбивки вікна на кілька частин. Елемент FRAME. Альтернативний уміст фрейму в елементі NOFRAMES. Вбудовування одного документа в іншій за допомогою елемента IFRAME.

Практика: Створення головної сторінки, що містить фрейми, з різними  документами.

• Використання посилань. Елементи А, LINK і BASE.

Варіанти використання посилань у документі. Частини посилання. Власні атрибути елемента А. Визначення посилань у заголовку документу за допомогою елемента LINK. Елемент BASE для завдання базового URI для всіх посилань у документі.

Практика: Приклад використання різних типів посилань у документі.

• Текст - параграфи й списки. Елементи Р и BR. Елементи-Списки OL, UL, LI. Списки-Визначення DL, DT, DD

Способи виділення параграфів і списків у тексті. Атрибути елементу Р. Використання елементу BR для завдання відступів. Створення нумерованих (OL) і ненумерованих (UL) списків глибиною не більше трьох рівнів вкладеності. Рядок списку - елемент LI. Уведення списків - визначень за допомогою контейнера DL з використанням елементів DT і DD.

Практика: Створення тексту визначень із використанням елементів списку (уведення сторінки із тлумачного словника).

• Огляд елементів структурування тексту. Елементи Q і BLOCKOUT. Елементи SUB і SUP. Особливості використання елементу PRE.

Роль допоміжних елементів EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR і ACRONYM у структуруванні тексту. Виділення в тексті цитат і висловлень за допомогою елементів Q і BLOCKOUT. Використання елементів SUB і SUP для зсуву тексту відповідно вище або нижче щодо рядка. Блок попередньо відформатованого тексту PRE.

Практика: Текст по хімії (уведення цитат, визначень і хімічних формул)

• Елементи керування шрифтами. Елементи властивостей шрифту TT, I, B, BIG, SMALL. Елементи визначень FONT і BASEFONT.

Огляд елементів керування властивостями шрифтів. TT- моношириний шрифт, I- нахилений, B- жирний, BIG- великий кегль, SMALL- дрібний кегль. Застарілий спосіб оформлення тексту за допомогою елементу FONT. Встановлювання параметрів шрифту за замовчуванням за допомогою BASEFONT.

Практика: Створення документу, що містить різні варіанти властивостей шрифтів (оформлення як за допомогою FONT, так і з використанням таблиць стилів).

• Таблиці. Контейнер TABLE. Елементи TR, TH і TD. Заголовок CAPTION. Об'єднання клітинок. Елементи THEAD, TFOOT, TBODY.

Визначення таблиць за допомогою контейнера TABLE. Уведення нового рядка таблиці (TR). Клітинки - заголовки (TH) та клітинки, що містять дані (TD). Власні атрибути елементів побудови таблиць. Обтікання таблиць. Заголовок таблиць CAPTION. Групування рядків таблиці за допомогою елементів THEAD, TFOOT, TBODY.

Практика:  Уведення таблиць.

• Властивості форматування клітинок таблиць. Елементи COL і COLGROUP. Застосування сполучень елементів TR, TH і TD для створення таблиць різного рівня складності.

Форматування стовпчиків таблиці елементами COL і COLGROUP. Приклад вирівнювання заголовків. Контейнер TR для групи клітинок у рядку. Настроювання власних атрибутів для елементів TH і TD. Огляд можливих варіантів зовнішнього вигляду таблиць.

Практика: Сторінка, що містить таблиці складної структури

• Форми. Контейнер FORM. Створення полей уведення даних, перемикачів, вимикачів і кнопок за допомогою елемента INPUT.

Форми і їхній уміст. Контейнер FORM- об'єднання всіх складових частин форми в єдину групу. Власні атрибути елементу FORM. Елемент INPUT для створення елементів керування. Використання атрибута TYPE для завдання типу елемента керування. Інші власні атрибути елемента INPUT. Створення полей уведення даних, перемикачів, вимикачів і кнопок.

Практика: Сторінка заповнення деякої анкети

• Елемент нестандартних кнопок BUTTON. Елемент списку вибору SELECT. Елементи логічного зв'язування списків OPTGROUP і OPTION. Елементи TEXTAREA, LABEL і

Створення нестандартних кнопок за допомогою елемента BUTTON. Використання списку вибору SELECT для пересилання обраного рядку на сервер. Логічне зв'язування декількох елементів за допомогою OPTGROUP і OPTION. Багатостроковий елемент TEXTAREA для уведення тексту. Прив'язка текстової інформації до елементів керування за допомогою LABEL. Контейнер FIELDSET для зв'язування елементів у групи.

Практика: Написання сторінки поштового клієнта.

• Розширення HTML в області мультімедіа. Елемент IMG. Елементи карти зображень AREA і MAP. Універсальний елемент OBJECT

Включення в HTML-документ мультімедійних ресурсів. Запровадження малюнків за допомогою елементу IMG. Його власні атрибути. Використання IMG у сполученні з елементом А для створення графічних посилань. Створення карт зображень на стороні клієнта за допомогою елементів AREA і MAP. Огляд основних атрибутів універсального елемента OBJECT для відображення різнорідної інформації.

Практика: Вставка графіки й створення карти зображень при оформленні сторінки.

• Елементи PARAM, APPLET і EMBED. Приклади їхнього використання.

Опис додаткових параметрів для елементів OBJECT і APPLET в елементі PARAM. Приклад підключення аплету до HTML- документа. Застарілий елемент APPLET. Альтернативний елемент EMBED.

Практика: Створення зображення з ефектом водяної поверхні. При цьому вибрати та застосувати відповідний аплет.

• Інші елементи HTML. Елемент CENTER. Елементи DIR, MENU і BL. Виклик сценаріїв JavaScript за допомогою елемента SCRIPT. Розширення Netscape і Microsoft: елементи BLINK, MARQUEE, NOBR, WBR, SPACER.

Неоднозначна підтримка деяких елементів різними броузерами. Огляд деяких застарілих елементів, які можуть зустрічатися в документах. Елементи CENTER, DIR, MENU і BL. Включення невеликих сценаріїв JavaScript за допомогою елементу SCRIPT. Розширення Netscape і Microsoft: елементи BLINK (ефект мерехтіння), MARQUEE (прокручування й переміщення тексту), NOBR, WBR (заборона/скасування розриву рядків), SPACER (контейнер порожнього простору)

Практика: Приклад заміни застарілих елементів (наприклад, BLINK) використанням таблиць стилів.

• Використання шарів за допомогою елементів LAYER, ILAYER, NOLAYER. Елементи виконання сценаріїв SCRIPTLET, IMPLEMENTS, PROPERTY, EVENT, SERVER і KEYGEN.

Використання шарів і зміна їхнього розташування без перезавантаження документа за допомогою елементів LAYER, ILAYER. Огляд власних атрибутів елемента LAYER. Елементи виконання сценаріїв SCRIPTLET, IMPLEMENTS, PROPERTY, EVENT. Виконання скрипта на вилученому комп'ютері SERVER. Відправлення зашифрованої пари (підпис-ключ) на сервер за допомогою елементу KEYGEN.

Практика: Створення документу з використанням шарів

 Модуль 3. Використання таблиць стилів CSS.

• Таблиці стилів CSS. Елемент STYLE. Директива @import. Псевдокласи та псевдоелементи.

Кілька способів підключення каскадних таблиць стилів до документу HTML. Підключення CSS у заголовку документа за допомогою елемента STYLE. Його власні атрибути. Директива @import як частина мови CSS для підключення зовнішніх таблиць стилів. Псевдокласи та псевдоелементи. П'ять псевдокласів елемента A: link, visited, active, hover, focus. Нові псевдокласи first-child, lang. Псевдоелементи first-line, first-letter, before, after. 

Практика: Створення документу з використанням псевдокласів A:link, A:visited, A:active. 

• Визначення класів і ідентифікаторів. Атрибути, загальні для більшості елементів.

Синтаксис визначення елемента й ідентифікатора класу. Визначення відразу декількох елементів. Застосування нових елементів у контейнерах. Атрибути, загальні для більшості елементів: ID (ідентифікатор), CLASS (клас), DIR (напрямок висновку) , LANG (мова), TITLE (хінт), STYLE (убудовані CSS), TABINDEX (порядок навігації), ACCESSKEY (гаряча клавіша), ALT (альтернативний текст). Визначені події для більшості елементів. ONCHANGE, ONCLICK...

Практика: Створення документа з використанням псевдоелементів P:first-letter і P:first-line

 

Модуль 4. Мова сценаріїв JavaScript і активні сторінки Web

• Динамічний HTML. Приклади підключення й використання скриптів за допомогою елемента SCRIPT. Введення в мову JavaScript. Алфавіт.

Динамічні зміни практично будь-яких властивостей сторінки. Введення в мову JavaScript. Визначення й завдання мови JavaScript. Синтаксис і алфавіт мови. Впровадження скриптів в HTML документ за допомогою елементу SCRIPT. Приклади скриптів.

Практика: Приклад програмування. Програма «Hello, world».

• Операції в мові JavaScript. Пріоритет операцій.

Операції присвоювання й порівняння. Арифметичні й логічні операції. Побітові операції. Операції над рядками. Деякі спеціальні операції й приклади їхнього використання. Пріоритет операцій.

Практика: Приклад звертання до властивостей кнопки за допомогою операції  this. Перехід по посиланню.

• Ідентифікатори JavaScript. Типи даних, ключові слова, коментарі. Умовний оператор і перемикач. Оператори циклу. Оператори маніпулювання об'єктами.

Використання ідентифікаторів JavaScript. Типи даних, ключові слова, коментарі. Умовний оператор if...else і перемикач switch. Оператори циклу for, while, do. Використання операторів break і continue. Оператори маніпулювання об'єктами with, for...in. Приклади використання операторів.

Практика: Створення скрипта з використанням основних операторів JS.

• Функції. Їхнє оголошення й виклик. Передача параметрів. Визначені функції.

Об'єднання операторів у блоки. Поняття функції. Типи значень, що повертаються. Масиви агрументів. Визначені функції eval, isFinite, isNaN, parseFloat, parseInt, String, Number, escape і unescape.

Практика: Розрахунок корню квадратного рівняння (функція)

• Об'єкти, властивості й методи в JavaScript. Роль ключового слова prototype. Деякі методи об'єктів window і document

Об’єктно-орієнтована модель JavaScript. Об'єкти, властивості й методи. Визначені й власні методи. Використання ключової властивості prototype при визначенні об'єктів. Два способи створення нових об'єктів в JavaScript. Огляд основних методів визначених об'єктів window і document.

Практика: Створення скрипта плавної «проявлення» зображення

• Визначені об'єкти JavaScript. Об'єкти Array, Boolean і Data. Їхні деякі властивості й методи.

Об'єкти Array (масиви), Boolean (логічний об'єкт) і Data (дата). Їхні деякі властивості й методи. Приклади застосування цих об'єктів у скриптах.

Практика: Програмування електронного годинника.

• Визначені об'єкти JavaScript. Об'єкти Function, Math, Number і String. Їхні деякі властивості й методи.

Визначення рядку коду JavaScript, який має виконуватися як функція. Деякі властивості об'єкту Function. Використання математичних констант і функцій у розрахунках за допомогою об'єкта Math. Спеціальні об'єкти Number і String, відповідно, для числових констант і послідовності символів.

Практика: Написання сторінки перекладу тексту смс-повідомлень у трансліт

• Події JavaScript. Ефект «спливання» подій. Об'єкт event.

Поведінка документа при його взаємодії з користувачем. Події JavaScript. Ефект «спливання» подій при їхньому накладенні. Два способи зв'язування подій. Доступ до параметрів і контроль спливань подій за допомогою об'єкта event.

Практика: Створення документа з ефектом «спливання» подій (використовувати перевизначення подій)

• JavaScript у дії. Практичний приклад використання HTML і JavaScript при розробці Web-Сторінки.

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

Практика: Створення html-калькулятора.