- •Конспект лекцій з дисципліни
- •Лекція 1. Принципи організації глобальної мережі Інтернет. Введення в Веб-технології: структура та принципи Веб.
- •Предмет курсу
- •Характеристика Інтернет
- •Стек протоколів tcp / ip
- •Система доменних імен dns
- •Структура і принципи www
- •Проксі-сервери
- •Протоколи Інтернет прикладного рівня
- •Лекція 2. Принципи побудови Веб-сайтів. Структура Веб застосуваннь. Характеристика мови html.
- •Історія розвитку html
- •Принципи гіпертекстової розмітки
- •Групи тегів нтмl
- •Лекція 3. Структура html-документа і елементи розмітки заголовка документа.
- •Призначення заголовка
- •Відображення змісту елемента title
- •Основні контейнери заголовка
- •Елемент розмітки head
- •Елемент розмітки title
- •Елемент розмітки base
- •Елемент розмітки meta
- •Елемент розмітки link
- •Елемент розмітки style
- •Елемент розмітки script
- •Лекція 4. Контейнери тіла документа.
- •Теги тіла документа
- •Тіло документа - контейнер body
- •Теги управління розміткою Заголовки
- •Атрибут аlign
- •Теги управління відображенням символів
- •Теги, що управляють формою відображення
- •Верхні і нижні індекси
- •Атрибут sizе
- •Атрибут соlоr
- •Створення списків в html
- •Атрибути маркерів у ненумерований списку
- •Коментарі в мові html
- •Гіпертекстові посилання
- •Лекція 5. Графіка.
- •Використання графіки в html.
- •Атрибут src
- •Атрибут alt
- •Атрибут аlign
- •Формати графічних файлів
- •Активні зображення
- •Зображення в мініатюрі
- •Лекція 6. Таблиці html.
- •Засоби опису таблиць в html
- •Створення таблиць в html
- •Атрибут nowrap
- •Атрибут соlspan
- •Атрибут rowspan
- •Атрибут widтн
- •Застосування порожніх клітинок
- •Атрибут сеllраdding
- •Атрибути аlign і valign
- •Атрибут border
- •Атрибут cellspacing
- •Атрибут bgcolor
- •Атрибут background
- •Використання таблиць в дизайні сторінки
- •Лекція 7. Використання html-форм
- •Html-Форми
- •Завдання форми - елемент form
- •Атрибут cols
- •Атрибут name
- •Атрибут rows
- •Алгоритм роботи фреймів
- •Створення простої сторінки з фреймами
- •Завдання фреймової структури
- •Підготовка вмісту фрейма
- •Підготовка фрейму main
- •Атрибути rows і соls
- •Атрибут rows
- •Атрибут сols
- •Атрибут nаме
- •Атрибут маrginwidth
- •Атрибут маrginheight
- •Атрибут scrolling
- •Атрибут noresize
- •Атрибут srс
- •Атрибут таrgет
- •Вкладені і множинні кадрові структури
- •Лекція 9. Призначення і застосування каскадних таблиць стилів css
- •Призначення css
- •Способи застосування css
- •Перевизначення стилю
- •Елемент style
- •Посилання на зовнішній опис
- •Імпорт опису стилів
- •Селектор - ім'я елемента розмітки
- •Селектор - ім'я класу
- •Селектор - ідентифікатор об'єкта
- •Спадкування й перевизначення
- •Лекція 10. Блокові і стрічкові елементи css
- •Блокові і стрічкові елементи
- •Елемент div
- •Елемент span
- •Властивості блоків
- •Відступи (margin)
- •Набивання (padding)
- •Рамка (border)
- •Обтікання блоку тексту
- •Лекція 11.Позиціонування у css
- •Координати і розміри
- •Абсолютні координати
- •Відносні координати
- •Лінійні розміри блоку
- •Управління видимістю
- •Порядок накладення і область видимості
- •Порядок накладення блоків. Z-index
- •Область видимості блоку. Clip
- •Лекція 12. Призначення та застосування JavaScript.
- •Метод join ()
- •Метод reverse ()
- •Метод sort ()
- •Оператори мови
- •Лекція 14. Об'єктна модель броузера.
Атрибут cols
Указує (число символів) число колонок, що втримуються в текстовій області.
Атрибут name
Визначає найменування поля.
Атрибут rows
Задає кількість видимих рядків текстової області.
<BR><TEXTAREA NAME="тема" COLS="38" ROWS="3">
</TEXTAREA>
Використання списків у формі - циклодром <SELECT>
s
Коли форми HTML стають більше складними, у них часто включають списки із прокручуванням і меню, що випадають. Для цього використовують циклодром SELECT з атрибутом TYPE=select. Для визначення списку пунктів використовують циклодром <OPTION>. Циклодром <SELECT> підтримує три необов'язкових атрибути: MULTIPLE, NAME і SIZE.
Атрибут MULTIPLE
Дозволяє вибрати більш ніж одне найменування.
Атрибут NAME
Визначає найменування об'єкта.
Атрибут SIZE
Визначає число видимих користувачеві пунктів списку. Якщо у формі встановлене значення атрибута SIZE=1, то браузер виводить на екран список у вигляді меню, що випадає. У випадку SIZE > 1 браузер представляє на екрані звичайний список.
У формі може використовуватися циклодром <OPTION> тільки усередині циклодрому <SELECT>. Ці циклодроми підтримують два додаткових атрибути: SELECTED і VALUE.
Атрибут SELECTED
Використовується для первісного вибору значення елемента за замовчуванням.
Атрибут VALUE
Указує на значення, що повертається формою після вибору користувачем даного пункту. За замовчуванням значення поля дорівнює значенню циклодрому <OPTION>.
<BR>Вибір
<SELECT NAME="Вибір">
<OPTION>Варіант 1
<OPTION>Варіант 2
<OPTION VALUE="Варіант 3">Варіант 3
<OPTION SELECTED>Варіант 4
</SELECT>
Рис. 6.1. меню, Що Випадає
Лекція 8.
Використання HTML фреймів
Алгоритм роботи фреймів
Створення простої сторінки з фреймами
Завдання фреймової структури
Підготовка вмісту фрейма
Підготовка фрейму main
Використання тега <NOFRAMES>
Макетування фреймів - тег <FRAMESET>
Атрибути ROWS і СОLS
Атрибут ROWS
Атрибут NАМЕ
Атрибут МАRGINWIDTH
Атрибут SCROLLING
Атрибут NORESIZE
Атрибут SRС
Атрибут ТАRGЕТ
Вкладені і множинні кадрові структури
У цій лекції розглядаються різні способи фрагментирования змісту Web-сайту за допомогою механізму HTML-фреймів.
У якомусь сенсі фрейм - це саме те, що означає це слово: рамка навколо зображення, віконце або сторінка. Вводячи тег <FRAME>, дизайнер НТМL-сторінки розділяє екран браузера на частини. У результаті людина, що переглядає сторінку, може вивчати тільки одну її частину, незалежно від решти вмісту. Фактично браузер, що розпізнає фрейми, завантажує різні сторінки в різні секції, або фрейми, екрану. Наприклад, ви можете побудувати сторінку таким чином, що фірмовий знак буде зафіксований у верхній частині екрана, у той час як іншу частину сторінки користувач прокрутити звичайним способом. Можна розташувати збоку кнопки навігації, які не переміщуються, коли читач клацає по них мишкою, так що змінюється тільки частина екрана, а сама смужка навігації залишається нерухомою.
Алгоритм роботи фреймів
На перший погляд, фрейми - це щось складне, але їх легше зрозуміти, якщо провести аналогію з елементами таблиці. Розташування фреймів на екрані і осередків у таблиці задається майже однаково: теги і атрибути працюють так само, як їх табличні "родичі". Однак, хоча аналогія між одиничним фреймом на сторінці та осередком таблиці вірна, потрібно пам'ятати, що є й відмінності. Вміст осередку задано в коді HTML-сторінки з таблицею. Текст або графіка, складові вміст таблиці, фактично запроваджуються на тій же сторінці HTML, що й тег або атрибут, що описують таблицю. Навпаки, екран з фреймами описується в НТМL-сторінці, у контейнері FRAMESET. Вміст ж фрейму - це окрема HTML-сторінка, яка може перебувати де завгодно: в іншому каталозі, на локальному сервері або на віддаленому вузлі де-то в мережі. Фреймова структура визначає тільки спосіб організації екрану з фреймами і вказує, де знаходиться початкова вміст кожного фрейма. Для всіх фреймів задаються URL, що описують місцезнаходження їх даних. Як правило, на сторінці з фреймової структурою вмісту фреймів немає. Така сторінка зазвичай невелика - вона описує тільки кадрову структуру екрану. Коли документ завантажується у фрейм, ви можете клацати мишкою на засланні в цьому документі, щоб побачити пов'язані документи в інших кадрах, заданих у фреймовій структурі.
