- •Модуль 1. Основи html. Лабораторна робота №1 html - основні поняття, структура документа
- •Основні теоретичні відомості.
- •1. Основні поняття
- •2. Правила запису тегів:
- •3. Структура документу
- •4. Визначення й оформлення функціональних розділів документа
- •5. Форматування html – документа Вирівнювання:
- •Індекси:
- •Параметри шрифту:
- •Існують наступні логічні стилі:
- •Існують наступні фізичні стилі:
- •Завдання до лабораторної роботи
- •Лабораторна робота №2 Робота з графічними зображеннями на Web-сторінці. Списки
- •Основні теоретичні відомості
- •1. Використання графічного зображення в якості фону
- •2. Формати графічних файлів для www
- •3. Вставка графічних зображень (елемент img та його атрибути)
- •4. Списки
- •Маркірований
- •Нумерований
- •Список визначень
- •Вкладені списки
- •Завдання до лабораторної роботи
- •Лабораторна робота №3 Робота з редактором web-сторінок Dreamweaver. Посилання. Зв'язок з іншими документами. Використання об'єктів як посилання.
- •1. Основні теоретичні відомості.
- •2. Створення гіперпосилань
- •3. Види посилань
- •4. З'єднання з іншими документами
- •5. Звертання до певних розділів інших документів
- •6. Використання зображення як посилання
- •Завдання до лабораторної роботи
- •Лабораторна робота №4 Створення таблиць. Робота з атрибутами таблиці.
- •Основні теоретичні відомості
- •1. Загальна структура таблиці
- •2. Завдання загальних параметрів таблиці
- •3. Форматування даних у таблиці, оформлення рамок (форматування рядків і комірок)
- •1. Вирівнювання даних у стовпцях таблиці
- •2. Завдання кольору рамок таблиці
- •3. Завдання фонового малюнка для таблиці
- •4. Структурування таблиці
- •Завдання до лабораторної роботи
- •Лабораторна робота №5 Створення фреймів Настроювання атрибутів фреймів. Використання посилань, створення фреймового меню.
- •Основні теоретичні відомості
- •1. Основні поняття
- •2. Елемент завдання фреймів frameset та його атрибути
- •3. Вміст фреймів (елемент frame)
- •4. Вкладені фрейми
- •5. Інші атрибути елемента frameset
- •6. Атрибути елемента frame
- •2. Посилання й навігація
- •3. Плаваючі фрейми (елемент iframe)
- •Завдання до лабораторної роботи
- •Лабораторна робота №6 Карти зображень. Робота зі звуком.
- •Основні теоретичні відомості
- •1. Основні поняття
- •2. Створення карти посилань в html
- •3. Створення карт посилань за допомогою редактора Dreamweaver
- •Робота з мультимедіа
- •Вбудовування звукових файлів в Web-сторінку
- •Фонові звуки
- •Рухомий текст
- •Завдання до лабораторної роботи
- •Модуль 2. Створення інтерактівності. Css. Dhtml. Лабораторна робота №7 Робота з формами
- •Основні теоретичні відомості
- •2. Створення елементів керування
- •Список, що розкривається:
- •Поле - список
- •Список із множинним вибором
- •Завдання до лабораторної роботи
- •Основні теоретичні відомості
- •1. Поняття про аркуші стилів
- •2. Поняття про внутрішні та зовнішні аркуші стилів
- •3. Вбудований стиль (атрибут style)
- •4. Заголовний стиль (елемент style)
- •6. Види селекторів
- •Стильові властивості
- •1. Значення властивостей
- •2. Властивості шрифтів
- •3. Властивості тексту
- •4. Властивості кольору і фону
- •Завдання до лабораторної роботи
- •Лабораторна робота №9 Зовнішні аркуші стилів . Стильові властивості
- •Основні теоретичні відомості
- •2. Звертання до зовнішнього аркуша стилів (елемент link)
- •3. Запис css-правил.
- •Стільові властивості (продовження)
- •1. Властивості блоку
- •2. Властивості списків
- •3. Інші групи стильових властивостей
- •4. Псевдокласи й псевдоелементи
- •Завдання до лабораторної роботи
- •Лабораторна робота №10 Спадкування й каскадуванния. Візуальні ефекти
- •Основні теоретичні відомості
- •1. Правила спадкування властивостей
- •2. Селектори нащадків
- •3. Каскади стилів
- •4. Пріоритети стилів
- •5. Шари й позиціонування елементів
- •6. Вирізання області (властивість clip)
- •Завдання до лабораторної роботи
- •Лабораторна робота № 11. Dhtml.
- •Завдання до лабораторної роботи
- •Вимоги до звіту та критерії оцінювання
- •Критерії оцінювання лабораторних робіт:
- •Критерії оцінювання індивідуальних робіт:
- •Для отримання заліку необхідно виконати 70% завдань і набрати не менше 145 балів. Завдання для індивідуальної роботи.
- •Рекомендована література
- •Фоменко Андрій Вікторович Практикум зі створення
Лабораторна робота №2 Робота з графічними зображеннями на Web-сторінці. Списки
Мета: навчитися використовувати графічні зображення при оформленні HTML-документів. Навчитися створювати різні види списків у HTML-документі.
Основні теоретичні відомості
1. Використання графічного зображення в якості фону
Для створення графічного фону використовуються невеликі картинки у форматі gif і jpeg. Браузер автоматично заповнює ними весь екран. Для завдання фону використовується атрибут background тегу <BODY>.
Наприклад: <BODY background ="bgimg.gif">
2. Формати графічних файлів для www
Існує достатньо багато форматів, які забезпечують організацію графічних даних (BMP, EPS, GIF, JPEG, PCX, TIFF та багато інших). Але не всі графічні формати підтримуються браузерами. Тому на сьогодні всі зображення для Web – сторінок створюються в трьох форматах, які підтримуються браузерами. До них відносяться:
GIF (Graphic Interchange Format – формат графічного обміну) – є стандартом для Web-графіки. Формат GIF дозволяє створювати прозорі ділянки на зображенні та назначати відтворення зображення в режимі черезрядкового розгорнення. Також є можливість в одному файлі зберігати декілька зображень, які послідовно змінюючись створюють ефект анімації (так звана, gif-анімація). Підтримується усіма графічними Web браузерами. Недоліком формату є обмежена палітра кольорів (всього 256);
JPEG (Joint Photographic Experts Group – об’єднана група експертів в області фотографії) – є стандартом для Web-графіки та забезпечує високу ступінь стиснення. Часто використовується для зображень з високою якістю (наприклад, для фотографій). Підтримується усіма графічними Web браузерами.;
PNC (Portable Network Graphics – переносна сітьова графіка) – володіє всіма можливостями формату GIF. Але на відмінність від GIF формату підтримує глибину кольору 48 біт. Недоліком цього формату є те, що він підтримується не всіма браузерами.
Таким чином, для того, щоб вставити картинку у web-сторінку найкраще використовувати формати gif і jpg.
3. Вставка графічних зображень (елемент img та його атрибути)
Для вставки картинки використовується тег IMG.
Його синтаксис:
<IMG SRC="ім'я файлу" ALT="текст" ALIGN=розташування WIDTH=ширина HEIGHT =висота >,
де: атрибут src вказує шлях до файлу, який добавляється на Web-сторінку; атрибут alt описує альтернативний текст для зображення, цей текст відображається замість зображення , коли сам малюнок ще не показується або коли курсор миші перебуває над картинкою; атрибут align задає місце розташування зображення; атрибути width і height задають ширину та висоту зображення відповідно, значення цих атрибутів можуть задаватися в пікселях або відсотках розміру екрана.
Атрибут src є обов’язковим.
Атрибути alt, align, width, height є необов'язковими.
Атрибут align може мати наступні значення:
top - наступний текст розташовується у верхній частині зображення;
bottom - наступний текст розташовується в нижній частині зображення;
left - зображення перебуває в лівій частині аркуша, текст обтікає зображення праворуч;
middle - зображення перебуває в центрі аркуша,
right - зображення перебуває в правій частині аркуша, текст обтікає зображення ліворуч.
Використовуючи атрибут ALIGN= із значеннями LEFT або RIGHT можна створити картинку, яку обтікатиме текст. В кінці об'єкту обов'язково повинна бути присутньою команда BR з атрибутом CLEAR=, який припиняє обтікання картинки. Після цієї команди текст виводиться нижче за графічний файл.
Розглянемо наступний приклад:
<IMG SRC="picture.gif" ALIGN=LEFT HSPACE=4> Тут розташовується текст, який слід помістити справа поряд з картинкою. Текст повинен обтікати картинку
<BR CLEAR=LEFT>Здесь розташовується текст, який слідує
помістити нижче за картинку.
Значення параметрів width і height, як вже відзначалось, вказуються як у пікселях, так і відсотках відносно розмірів вікна перегляду. Якщо завдана ширина й висота не збігаються з істинним розміром, то браузери виконують автоматичне перемасштабування. Якщо зазначено тільки один параметр, то другий буде обчислюватися автоматично. Якщо не потрібно змінювати розмір зображення, то краще вказати в параметрах width, HEIGHT реальний розмір у пікселях (визначити цей розмір можна за допомогою будь-якого растрового редактора).Масштабування може привести до різкого погіршення якості графічного файлу, тому рекомендується задавати розміри відповідні розмірам графічного файлу.
Рекомендується для великих графічних файлів (більше 10 Kb) завжди задавати їх розміри, для прискорення роботи браузера. Якщо розміри не задані, то зустрівши графічний файл браузер припиняє виведення тексту і чекає поки перекачається вся картинка, щоб визначити її розміри.
Атрибут ALT= указує, що ставити на місце малюнка, якщо ваш браузер не уміє показувати графічні файли або унаслідок повільної швидкості перекачування ви не отримали файл по мережі.
Якщо ви вставляєте команду IMG в документ, то браузер розміщує наступний за нею текст внизу від картинки.
Атрибут HSPACE= задає горизонтальний відступ між текстом і картинкою. Якщо даний атрибут не заданий, то текст розташовуватиметься впритул до картинки. Атрибут VSPACE = задає вертикальний відступ між текстом і картинкою).
Відділення зображення від тексту (атрибути hspace та vspase)
Параметр hspace – задає ширину (в пікселях) пустого поля справа та зліва від зображення.
Параметр vspase – визначає розміри (в пікселах) пустого поля зверху та знизу від зображення.
Рамки навколо зображення (атрибут border)
Параметр border – значення цього параметру визначає ширину рамки навколо зображення в пікселах.
Альтернативний текст (атрибут alt)
Параметр alt дає деяку інформацію про графічне зображення, якщо режим перегляду відключений (іноді він використовується як підказка).
Використання зображення як посилання
Графічне зображення може використовуватися як покажчик гіпертекстових зв'язків. Для створення такого посилання достатньо включити тег IMG усередину тегу - контейнеру <A>.
Регулювання якості зображення (атрибут lowsrc)
Визначається атрибутом lowsrc. Значенням цього атрибуту є URL зображення низької якості, яке завантажується в першу чергу.
Використання мініатюрних версій зображення досягається за допомогою Масштабування.
Якщо розміри вказані атрибутами HEIGHT= (висота) і WIDTH= (ширина), не співпадають з розмірами графічного файлу, то останній масштабується.