Контрольні запитання:

1. Для чого використовуються фрейми?

2. За що відповідає атрибут target тегу <a>?

3. Як вказати посиланню в якому фреймі треба відкритися?

4. У яких одиницях можна задати ширину або висоту фрейму?

5. Чи можна змінювати границі між фреймами?

6. Для чого використовуються карти-зображень?

7. Які форми фігур можуть використовуватися в картах-зображень?

8. Як можна підписати фігури карти-зображень?

9. Які види карт-зображень бувають?

10. Що може служити альтернативою використання карт-зображень?

Практична робота 7 Тема: Введення в каскадні таблиці стилів

Мета: Вивчити підключення таблиць стилів до html- документу

Питання для повторення:

1. Використання таблиць каскадних стилів.

2. Поняття про таблиці каскадних стилів.

3. Застосування каскадних стилів у НТML-документах.

4. Позиціювання елементів Web-сторінки за допомогою стилів.

Завдання:

Створити HTML-сторінку з наведеними структурними елементами.

Хід роботи:

1. Запустити HTMLPad 2010 і створити в ньому два файли: lab7.html і lab7style.css. Обидва файли зберегти у своїй папці.

2. Створити в html-файлі п’ять абзаців завдовжки в три рядки.

3. Зберегти html-сторінку і переглянути її у браузері.

4. У файлі lab7style.css напишіть стиль для селектора тегу body, у якому вкажіть колір тексту, розмір літер і назву шрифту:

5. Включити режим попереднього перегляду і переглянути, як виглядає стиль всього документа. Щоб html-документ «підняв» ці стилі, необхідно до html-файлу підключити css файл:

6. Зберегти зміни. Переглянути html-файл у браузері. Звернути увагу на шрифт.

7. В css файлі створити шрифт абзацу, в якому встановити розріджений інтервал тексту між літерами:

8. Зберегти css файл. Оновити html-файл в браузері і звернути увагу на зміни.

9. Для того, щоб один з абзаців зробити курсивом і підкресленим необхідно створити клас

і підключити його до другого абзацу

10. Зберегти зміни та переглянути результат.

11. Створити клас для форматування третього абзацу з наступними властивостями:

• шрифт абзацу Comic Sans (font-family);

• розмір шрифту 25 пт (font-size);

• відступ червоного рядка в 50 пікселів (text-indent).

12. Підключити стиль до третього абзацу, використовуючи атрибут class.

13. Створити клас .rich для відображення п’ятого абзацу, що містить наступні властивості тексту:

• Шрифт Arial, 15 пт;

• Зображення жирне + курсив (font-weight; font-style);

• Колір букв помаранчевий (color);

• Висота рядка 25 пунктів (line-height).

14. Створити клас .perenos і заборонити у ньому перенесення слів в межах одного абзацу (white-space). Призначити цю властивість другому і четвертому абзацу. Для цього в атрибуті class тегу абзацу через пропуск вказати два класи (той, що був раніше + клас perenos). Зберегти та переглянути зміни.

15. Для того, щоб виділити слова в межах одного абзацу використати тег <span> (він дозволяє додавати форматування до будь-якого текстового елементу). Створити клас, що містить заголовні червоні букви:

і вказати новий клас в тезі

16. Створити клас з наступними властивостями:

• шрифт Courier 12 пт;

• всі букви заголовні;

• міжбуквений інтервал розріджений на 2рх;

• текст підкреслений;

• червоний рядок 2 см;

• міжрядковий інтервал подвійний.

17. Додати ще пару абзаців і призначити їм властивості цього класу.

18. Створити свої 2-3 класи стилів тексту (кожен стиль повинен включати по 3-4 властивості форматування тексту) і підключити їх до абзаців або заголовків першого, другого і третього рівнів.

Таблиця 7.1