Завдання до лабораторної роботи

Завдання №1

1. Створіть на диску D: папку Web.

2. Знайдіть через пошук на комп'ютері три графічних файли з розширеннями *.jpg. Скопіюйте їх у папку Web

3. Перейменуйте скопійовані файли відповідно у 1.jpg, 2.jpg, 3.jpg.

4. Створіть за допомогою текстового редактору Блокнот просту web – сторінку і збережіть її в папці Web під іменем Imeg.html.

5. Вставте в документ Imeg.html один з файлів папки графічних файлів: 1.jpg, 2.jpg, 3.jpg. Наприклад:

<img src="1.jpg" alt="picture" width="20%" height="47">

Завдання №2

Змінити документ Imeg.html наступним чином:

1. Наберіть наступний текст, застосовуючи різний розмір і колір шрифту.

Мало знать себе цену - надо еще пользоваться спросом

2. Вставити зображення 1.jpg, 2.jpg, 3.jpg в документ Imeg.html. Збережіть зміни в документі Imeg.html і перегляньте його за допомогою Web – браузеру.

3. Встановіть вирівнювання зображень в документі Imeg.html наступним чином:

1. Вирівняти середину зображення в середині поточного рядка:

Мало знати собі ціну (вставка зображення)- треба ще користуватися попитом

2. Зображення притискається до правого поля вікна. Текст обтікає зображення з лівої сторони. ;

3. Верхня границя зображення вирівнюється по найвищому елементу поточного рядка.

Завдання №3

1. Змінити документ Imeg.html наступним чином: добавити до Imeg.html список, використовуючи маркери у вигляді не зафарбованих кружків:

<ul type=circle> Висловлення на теми:

<li>родина

<li> бізнес

<li> тварини </ul>

3. Збережіть зміни в документі Imeg.html. Перегляньте документ Imeg.html за допомогою програми перегляду Web – сторінок.

Завдання №4

Внесіть наступні зміни до списку, який був створений в попередньому завданні:

1. Змінити маркери списку на графічні зображення. Для цього замініть теги списку на теги вставки малюнка формату GIF (малюнки знайти самостійно).

Наприклад,

<img src="file://Server/FOTO/WEB/BALL/ ballblk-2.gif" width="16" height="40">.

Зауваження

Кожний пункт необхідно відокремлювати тегом <br> або тегом <p>

Завдання №5

Добавити на сторінку Imeg.html нумерований список наступного вигляду:

1. Анекдоти

2. Афоризми

3. Висловлення

1. Забавні історії

2. Смішні ситуації

Завдання № 6

Добавити на сторінку Imeg.html наступний список визначень

Щирість

(недолік самовладання)

Дурні

(ті, які женяться)

Розумні

(ті, які виходять заміж)

Завдання № 7

Добавити на сторінку Imeg.html вкладений список наступного вигляду:

1. Анекдоти

i. Про доблесну міліцію

ii. Про добрих лікарів

iii. Про слухняних дітей

1. Афоризми

1. Висловлення

• Тости

 Весільні

 Новорічні

• Побажання

1. Забавні історії

2. Смішні ситуації

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

1. Який тег використовують для вміщення графічного зображення на сторінку?

2. Які атрибути використовують для зміни розмірів малюнка?

3. За допомогою яких тегів та їхніх атрибутів можна управляти розміщенням зображення на екрані?

4. Які існують види списків?

5. Як задати нумерований список?

6. Чи можна вставити до нумерованого списку маркований?

7. Який атрибут використовується для зміни схеми нумерації?

8. Як створити маркований список?

9. Як перемінити маркер на картинку?

10. Як створити вкладений список?