ЛАБОРАТОРНА РОБОТА № 10

Приклад 1

Створити сторінку HTML за допомогою скрипта.

На сторінку помістити: заголовок та три абзаци (один звичайний, другий з ідентифікатором, третій із класом)

При завантаженні елементи сторінки отримують наступні стильові властивості:

• фон-картинка;
• за промовчанням текст вирівнюється по центру
• заголовок h1 зеленого кольору, виділений жирним шрифтом та курсивом
• звичайні абзаци чорного кольору, виділені курсивом;
• Абзаци з класом f1 червоного кольору, підкреслені;
• Абзаци з ідентифікатором f2 синього кольору

Скрипт:

Приклад 2

Нехай на HTML-сторінках знаходяться заголовок, три абзаци та кнопка. При натисканні на кнопку елементи сторінки одержують такі стильові властивості:

• фон блакитного кольору
• за промовчанням текст вирівнюється по центру
• заголовок h1 червоного кольору
• звичайні абзаци білого кольору розмір шрифту 18;
• Абзаци з ідентифікатором f1 жовтого кольору, підкреслені;
• Абзаци з класом f2 червоного кольору, вирівняні з правого краю;
• Задати розмір кнопки 100Х100 пікселів, колір тексту на кнопці змінити на фіолетовий

Скрипт:

Завдання

Варіант 1

1. При натисканні на кнопку для всіх заголовків першого рівня зробити підкреслення. При повторному натисканні підкреслення видалити. Одночасно змінювати напис на кнопці.

Варіант 2

1. При натисканні на кнопку для всіх абзаців зробити шрифт Arial. Після повторного натискання повернути Times New Roman. Одночасно змінювати напис на кнопці.

Варіант 3

1. При натисканні на кнопку для всіх заголовків другого рівня зробити рамку. При повторному натисканні рамку видалити. Одночасно змінювати напис на кнопці.

Варіант 4

1. При натисканні на кнопку зробити для всіх елементів класу r розмір шрифту 20pt. При повторному натисканні повернути 12pt. Одночасно змінювати напис на кнопці.

Варіант 5

1. При натисканні на кнопку для всіх заголовків першого рівня зробити заливку рожевим кольором. При повторному натисканні зробити заливку бірюзовим кольором. Одночасно змінювати напис на кнопці.

Варіант 6

1. При натисканні на кнопку для всіх абзаців зробити курсив. При повторному натисканні повернути звичайне зображення. Одночасно змінювати напис на кнопці.

Варіант 7

1. При натисканні на кнопку для всіх заголовків другого рівня зробити вирівнювання по центру. При повторному натисканні повернути вирівнювання лівим краєм. Одночасно змінювати напис на кнопці.

Варіант 8

1. При натисканні на кнопку зробити для всіх елементів класу r шрифт жирний. При повторному натисканні повернути нормальну жирність. Одночасно змінювати напис на кнопці.

Варіант 9

1. При натисканні на кнопку для всіх заголовків першого рівня зробити рамку. При повторному натисканні рамку видалити. Одночасно змінювати напис на кнопці.

Варіант 10

1. При натисканні на кнопку для всіх абзаців зробити розмір шрифту 20pt. При повторному натисканні повернути 12pt. Одночасно змінювати напис на кнопці.

Варіант 11

1. При натисканні на кнопку для всіх заголовків другого рівня зробити підкреслення. При повторному натисканні підкреслення зняти. Одночасно змінювати напис на кнопці.

Варіант 12

1. При натисканні на кнопку зробити для всіх елементів класу r ширину елемента дорівнює 50%. При повторному натисканні повернути 100% ширину. Одночасно змінювати напис на кнопці.

Варіант 13

1. При натисканні на кнопку для всіх заголовків першого рівня зробити ширину 60% і рамку. При повторному натисканні повернути у вихідний стан. Одночасно змінювати напис на кнопці.

Варіант 14

1. При натисканні на кнопку, для всіх абзаців зробити шрифт жирним та курсивним. При повторному натисканні повернути звичайне зображення. Одночасно змінювати

Варіант 15

1. При натисканні на кнопку зробити для всіх елементів класу k вирівнювання по центру. При повторному натисканні повернути вирівнювання лівим краєм. Одночасно змінювати напис на кнопці.

Варіант 16

1. При натисканні на кнопку для всіх заголовків другого рівня зробити заливку рожевим кольором. При повторному натисканні зробити заливку жовтим кольором. Одночасно змінювати напис на кнопці.