Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Комп.сети / МУ КомпМереж 2к Авт.doc
Скачиваний:
46
Добавлен:
09.02.2016
Размер:
1.13 Mб
Скачать

9.2. Практична частина

  1. Створити два файли: lab9.html и lab9style.css.

  2. Створити у файлі lab9.html п'ять абзаців, довжиною в три рядки. Наприклад,

Текст абзацу. Текст абзацу. Текст абзацу.

Текст абзацу. Текст абзацу. Текст абзацу.

Текст абзацу. Текст абзацу. Текст абзацу.

Текст абзацу. Текст абзацу. Текст абзацу.

Текст абзацу. Текст абзацу. Текст абзацу.

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

  2. В CSS-файлі написати стиль для селектора тега body, в якому вказати колір тексту, розмір букв і назву шрифту:

.body{

color: #009933;

font-size: 14px;

font-family: Arial;

}

  1. Підключити CSS-файл в HTML-файлі:

<head>

<title></title>

<link rel="stylesheet" type="text/css" href="lab9style.css"/>

</head>

  1. Зберегти зміни. Переглянути HTML-сторінку в браузері. Звернути увагу на шрифт.

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

.p{

letter-spacing: 10px;

}

  1. Зберегти CSS-файл. Оновити HTML-сторінку в браузері.

  2. Другий абзац зробити курсивом і підкресленим. Для цього створити клас .kursiv:

.kursiv{

font-style: italic;

text-decoration: underline;

}

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

<p class="kursiv"> Текст абзацу. Текст абзацу. Текст абзацу.</p>

  1. Зберегти і переглянути.

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

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

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

  • відступ абзацу в 50 пікселів (text-indent).

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

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

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

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

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

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

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

  2. Виділити слова в межах одного абзацу. Наприклад, створити клас, що містить заголовні червоні літери:

.red{

color: #FF0000;

text-transform: uppercase;

}

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

<p class="kursiv perenos"> Текст абзаца.

<span class="red"> Внимание! </span>Текст абзаца. Текст абзаца.</p>

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

  • шрифт Courier 12 пт;

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

  • міжсимвольний інтервал розряджений на 200%;

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

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

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

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

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

  3. Додати посилання на файл lab9.html в файл index.html.

  4. Показати і захистити виконану роботу викладачеві.