
- •Конспект лекцій з дисципліни
- •Лекція 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. Об'єктна модель броузера.
Теги тіла документа
Теги тіла документа призначені для керування відображенням інформації у програмі інтерфейсу користувача. Вони описують гіпертекстову структуру бази даних за допомогою вбудованих в текст контекстних гіпертекстових посилань. Тіло документа складається з:
ієрархічних контейнерів і заставок;
заголовків (від Н1 до Н6);
блоків (параграфи, списки, форми, таблиці, картинки і т.п.);
горизонтальних отчерківаній і адрес;
тексту, розбитого на області дії стилів (підкреслення , виділення, курсив);
математичних описів, графіки і гіпертекстових посилань.
Тіло документа - контейнер body
Опис тегів тіла документа слід почати з тега BODY. На відміну від тега НEАD, тег BODY має атрибути.
Атрибут BАСКGROUND визначає фон, на якому відображається текст документа. Так, якщо джерелом для фону HTML-документа є графічний файл image.gif, то в відкриваючому теге тіла BODY з'являється відповідний атрибут:
<ВОDY ВАСКGROUND = "image.gif">
Як видно з цього прикладу, в якості значення даного атрибуту використовується адреса в скороченій формі URL. У даному випадку це адреса локального файлу. Слід зауважити, що різні інтерфейси користувача підтримують різні додаткові атрибути для тега ВОDY.
Таблиця 3.1. Атрибути
Атрибут |
Значення |
ВGCOLOR = # FFFFFF |
Колір фону |
ТЕХТ = # 0000FF |
Колір тексту |
VLINK = # FF0000 |
Колір пройдених гіпертекстових посилань |
LINK = # 008000 |
Колір гіпертекстового посилання |
У даній таблиці рядок # ХХХХХХ визначає колір у термінах RGB в шістнадцятковій нотації. Також є можливість задавати кольори за назвою. Далі в таблиці наведено назви кольорів, визначені в стандарті HTML 4 і відповідні їм RGB-коди. Відзначимо, що багато сучасних браузерів виходять за рамки стандартів і підтримують набагато більше назв квітів.
Таблиця 3.2. Кольори
Назва |
Код |
Назва |
Код |
Aqua |
# 00FFFF |
navy |
# 000080 |
Black |
# 000000 |
olive |
# 808000 |
Blue |
# 0000FF |
purple |
# 800080 |
Fuchsia |
# FF00FF |
red |
# FF0000 |
Gray |
# 808080 |
silver |
# C0C0C0 |
Green |
# 008000 |
teal |
# 008080 |
Lime |
# 00FF00 |
white |
# FFFFFF |
Maroon |
# 800000 |
yellow |
# FFFF00 |
Так, значення атрибутів у таблиці 3.1 визначають колір тексту як синій, фону - білий, пройдені посилання червоні, а нові посилання зелені. Якщо в якості атрибутів тега ВОDY вказати
<ВОDY ВGCOLOR = # FFFFFF ТЕХТ = # 0000FF
VLINK = # FF0000 LINK = # 00FF00>,
то колір фону буде білим, текст буде синім, посилання - зеленими, а пройдені посилання стануть червоними. Проте користуватися цими атрибутами слід вкрай обережно, тому що у користувача може виявитися інший інтерфейс, який ці параметри не інтерпретує.
Microsoft Internet Explorer і Netscape Navigator допускають застосування атрибутів LEFTMARGIN = n і ТОРМАRGIN = n в теге <ВОDY>. Атрибут LEFTMARGIN = задає ліве поле для всієї сторінки. ТОРМАRGIN = визначає верхнє поле. Число n показує ширину поля у пікселях. Наприклад, тег<ВОDY LEFTMARGIN = "40">створить на всій сторінці ліве поле шириною 40 пікселів. При n, що дорівнює 0, ліве поле відсутнє.