Значення

Параметри тегу < TR>

ALIGN Горизонтальне вирівнювання тексту

відносно границь клітин у рядку

LEFT, CENTER,

RIGHT

VALIGN Вертикальне вирівнювання тексту відносно

границь клітин у рядку

TOP, MIDDLE,

BOTTOM

Параметри тегу < TD>

ALIGN Горизонтальне вирівнювання тексту

відносно границь даної клітини

LEFT, CENTER,

RIGHT

VALIGN Вертикальне вирівнювання тексту відносно

границь даної клітини

TOP, MIDDLE,

BOTTOM

HEIGHT Задає висоту клітини в пікселях. Якщо в

одному рядку задається дві клітини різної

висоти, то вибирається найбільша.

Число

COLSPAN Об’єднання кількох клітин рядка в єдину

клітину

Число

ROWSPAN Об’єднання кількох клітин стовпця в єдину

клітину

Число

10

Фізико математичний факультет, кафедра Інформатики і ОТ

Зауваження. Параметри BGCOLOR та BORDERCOLOR можуть використовуватись для

задання кольору елементів окремого рядка (використовується для тега < TR>) або окремої клітини

(використовується для тега < TD>).

Завдання:

1. Створіть порожній WEB-документ, використовуючи текстовий редактор.

2. Після тегу < BODY> введіть наступний текст:

< TABLE BORDER=" 10" WIDTH=" 80%" >

< CAPTION ALIGN=" TOP" > Список телефонів < /САPTION>

< TR BGCOLOR=" YELLOW" >

< TH> Прізвище< /TH>

< TH> Номер телефону< /TH>

< /TR>

< TR>

< TD> Вінниченко Є.Ф.< /TD>

< TD> +38-050-382-86-79< /TD>

< /TR>

< TR>

< TD> Іванов І.І.< /TD>

< TD> 5-43-21< /TD>

< /TR>

< TR>

< TD COLSPAN=" 2" > На першому поверсі є телефон-автомат.< /TD>

< /TABLE>

3. Збережіть цей документ під іменем table.html.

4. Подивіться, як відображається цей файл в браузері. Встановіть відповідність між елементами

HTML-коду і фрагментами документа, що відображаються на екрані.

5. Внесіть наступні зміни до файлу. Додайте до таблиці ще декілька записів з прізвищами та

номерами телефонів. Збережіть змінений документ на диску, закрийте текстовий редактор та

поновіть документ в браузері.

11

Фізико математичний факультет, кафедра Інформатики і ОТ

6. Доповніть таблицю ще одним стовпцем з загловком “Примітка”. Обєднайте всі рядки доданого

стовпця, крім останнього, в одну комірку та занесіть в нього текст “дзвонити з 12: 00 до 20: 00”.

Розширте останній рядок таблиці таким чином щоб він знаходився під всіма, трьома, стовпцями.

7. Збережіть змінений документ на диску, закрийте текстовий редактор та поновіть документ в

браузері. Перевірте правильність внесених змін.

Вправа 6. Робота з графікою.

1. В графічному редакторі створіть новий малюнок, встановивши його ширину та висоту 50

точок.

2. Оберіть жовтий колір переднього плану та синій фон. Залийте малюнок фоновим кольором та

намалюйте будь-яке зображення.

3. Збережіть малюнок під іменем ris.bmp у власний каталог.

4. Створіть новий малюнок, встановивши його ширину та висоту 50 точок. Оберіть блакитний

колір переднього плану та жовтий фон. Залийте малюнок фоновим кольором та намалюйте

будь-яке зображення.

5. Збережіть малюнок під іменем fon.gif у власний каталог.

6. Створіть порожній WEB-документ, використовуючи текстовий редактор.

7. В тезі < BODY> додайте параметр BGCOLOR=" Aqua".

8. Після тегу < BODY> введіть наступний текст:

Цей текст розташований до малюнку.

< IMG SRC=" ris.bmp" ALT=" Мій малюнок" >

А ось цей текст розташований вже після малюнку.

9. Збережіть цей документ під іменем picture1.html.

10. Запустіть браузер. Переконайтесь, що у властивостях браузера включено відображення

малюнків.

11. Подивіться, як відображається файл picture1.html в браузері. Встановіть відповідність між

елементами HTML-коду і фрагментами документа, що відображаються на екрані.

12. Внесіть наступні зміни до файлу. Замість тексту, розташованого між тегами < BODY> і

< /BODY>, запишіть наступний текст:

Цей малюнок має стандартний розмір:

< IMG SRC=" ris.bmp" ALIGN=" TOP" > < BR>

А ось цей же малюнок в рамочці, але розміри вже інші:

12

Фізико математичний факультет, кафедра Інформатики і ОТ

< IMG SRC=" ris.bmp" ALIGN=" MIDDLE" BORDER=" 3" HEIGHT=" 100" WIDTH=" 75" > < BR>

А ось цей текст розташований вже після малюнку.

11. Збережіть змінений документ на диску. Подивіться, як відображається файл picture1.html в

браузері.

12. У власній папці створіть папку pic. Перемістіть до неї ris.bmp та fon.gif. Передивіться документ

picture1.html. Зробіть висновки. Відредагуйте файл picture1.html таким чином, щоб картинка

показувалися знову

13. Використовуючи текстовий редактор, створіть наступний WEB-документ:

< HTML>

< BODY BACKGROUND=" pic/fon.gif" >

< FONT SIZE=" 6" >

Ми знову бачимо наш малюнок

< IMG SRC=" pic/ris.bmp" ALIGN=" TOP" HSPACE=" 30" VSPACE=" 20" >

Але його відокремлено від тексту відступами.

< /BODY>

< /HTML>

14. Збережіть цей документ під іменем picture2.html. Подивіться, як відображається файл

picture2.html в браузері. Встановіть відповідність між елементами HTML-коду і фрагментами

документа, що відображаються на екрані.

Переважна більшість WEB-документів містять графічні зображення, такі як фотографії,

картинки, піктограми тощо. Такі зображення зберігаються на серверах в окремих файлах з

розширеннями bmp, jpg, gif та іншими.

Для вставки малюнка в документ використовується одинарний тег < IMG>, який

використовується з одним обов’язковим параметром SRC, що задає ім’я графічного файлу. Інші

параметри є необов’язковими. За допомогою тега IMG можна також вставити відеофільм, який

запускатиметься в момент відкриття web-сторінки.

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

файли є в тому ж каталозі, що основний html-файл, то достатньо зазначити лише назву файлу,

наприклад, SRC=" myfoto.gif". Якщо файл є в деякому іншому каталозі, то шлях до нього можна

подати так: "..\images\myfoto.gif".

Параметр Призначення Можливі