3.1 Практичні завдання:

1. Запустите веб-сервер Денвер.

2. Створіть у своєму домені файл lab2.html.

3. Використовуючи дані з архіву до лабораторної роботи вставте в документ зображення з атрибутами: ширини, висоти, вирівнювання підказок, що спливуть, і т.д.

4. Позначте початок кожного розділу сьогоднішньої лабораторної як іменований якір: <a name="image">, <a name="spisok">.

5. На початку сторінки додайте список посилань на всі розділи лабораторної роботи. (Помніть, що при посиланні на іменований якір слід використовувати знак # перед іменем якоря.)

6. Додайте донизу сторінки посилання на завантаження початкового файлу Денвера.

7. Додайте донизу документа посилання на свою сторінку в контакті, яка буде відкриватися в новому вікні.

8. Друге зображення в документі зробіть посиланням на пошукову систему Google

9. Створіть новий файл index.html, в якому розробіть список, що містить посилання на завдання двох лабораторних робіт.

10. Створіть новий файл my.html і запишіть в ньому: нумерований список з відомих Вам мов програмування, маркірований список з відомих Вам колірних палітр.

11. Додайте посилання на файл my.html у файл index.html

12. Пред'явити роботу викладачеві (в браузері і Блокноті).

13. Оформити звіт. В звіт включити код і зображення створених Html-Сторінок

Лабораторна робота №3 Каскадні таблиці стилів

Мета роботи: Вивчити способи використання стильової розмітки. Навчитися створювати і застосовувати таблиці стилів для керування вигляду вмісту Web-сторінок.

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

1. Що таке CSS?

2. Загальний синтаксис таблиць стилів

   1. Правила CSS

   2. Класи

   3. Ідентифікатори

   4. Груповання властивостей

3. Використання в web-сторінках

   1. Вбудовані стилі

   2. Впроваджені стилі

   3. Зв'язані таблиці стилів

   4. Апаратно-залежні стилі

4. Властивості CSS

5. Позиціонування елементів.

Теоретичні відомості.

Основні проблеми, з якими зустрічалися розробники сайтів до появи CSS:

Перша проблема - проблема позиціонування (розмітка сторінок). Хоча для цього стали використовувати таблиці (вони не були для цього призначені спочатку), вони не розв'язали всіх проблем. Не можливо здійснити наступне:

• Не можна задати фіксовані розміри будь - якого блоку. Наприклад, текстовий блок буде роз'їжджатися при переповненні (навіть якщо він в таблиці).

• Не можна задати фіксовані координати положення блоку на сторінці.

• Не можна накласти один блок на іншій. Наприклад, спробуйте насунути картинку поверх таблиці або іншої картинки.

Друга проблема полягала в тому, що доводилося щораз задавати на сторінках розмір і колір шрифту, властивості комірок таблиці і т.д. Це сильно збільшувало розміри сторінки, а виходить, вона повільніше завантажується. У випадку якщо вам захотілося змінити колір або розмір шрифту, вам довелося б редагувати всі сторінки.

Третя проблема полягала в тому, що всі браузери мають індивідуальні настроювання. Наприклад, у браузері можна збільшити шрифт, що приведе до викривлення всієї сторінки.

За допомогою CSS ці проблеми можна розв'язати.