малюнок. Картинка зберігається після виконання команд Файл > Зберегти як веб-сторінку. У діалоговому вікні, Збереження документа вказується шлях до файлу з картинкою. Файл слід зберегти в особистій папці студента. Указується ім'я файлу, наприклад Ris1. Тип файлу встановлюється як веб-сторінка. Після натиснення на клавішу Зберегти в особистій папці студента з'являється папка з ім'ям Ris1.files. Ця тека містить файл з ім'ям image002.gif, у якому збережений малюнок. На цей малюнок слід посилатися при вставці малюнка у веб-сторінку. Для цього слід вставити рядок
<IMG SRC= «Ris1.files/image002.gif» ALIGN= «Middle»>.
Розташування малюнка прийняте посередині сторінки.
Завдання 1. Створення простої Web-сторінки
1. В текстову редакторі Блокнот введіть наступний текст:
<HTML>
<HEAD>
<TITLE> Перша Web-сторінка студента (прізвище)
</TITLE>
</HEAD>
<BODY>
Перша Web-сторінка створена (дата) і буде збережена в під ім'ям zavdanna1.html
</BODY> </HTML>
Для створення фону (шпалер) тег <BODY> слід записати так:
<BODY bgcolor=blue text=red> або
<BODY bgcolor=2.jpg text=yellow>.
У першому випадку фон буде блакитним, а текст буде червоного кольору. У другому випадку фон задається картинкою з ім'ям 2.jpg, а текст буде жовтого кольору.
2. Збережіть документ в своїй папці під ім'ям zavdanna1.html і
другий раз під ім'ям zavdanna1.txt.
3. Подивіться, як відображається цей файл у браузері. як відображається заголовок документа, розташований між тегами <TITLE> і </TITLE>, і відображення вмісту основного документа, розташованого між тегами <BODY> і </BODY>.
Завдання 2. Вивчення прийомів форматування абзаців
1. Відкрийте файл zavdanna1.txt і видаліть текст між тегами <BODY> і </BODY>.
2. Після тегу <BODY> введіть новий текст.
<Н1> 1. Додаткові засоби підготовки документів </Н1>.
Відокремите подальший текст зеленою горизонтальною лінією за допомогою тегу <HR> :
<HR SIZE=5 WIDTH=80% ALIGN=CENTER COLOR=«GREEN»>.
Далі введіть:
<Н2> 1.1. Гіперпосилання </Н2>.
У WORD 2003 автоматично оформляють шляхи до файлів з їх іменами, а також адреси Web-сторінок і електронної пошти як гіперпосилання.
Приклад створення гіпертекстового посилання розглянутий вище. Нижче приведений приклад створення гіперпосилання на файл Zavdanna1.htm, який знаходиться на жорсткому диску локального комп'ютера.
3. Відокремите цей абзац від решти тексту червоної горизонтальної лінії за допомогою прапора <HR>:
<HR SIZE=5 WIDTH=80% ALIGN=CENTER COLOR= «RED»>.
4. Введіть ще один абзац тексту, почавши його з тегу <р>. Наприклад:
Побудова маркованого і нумерованого списків.
5. Побудуйте маркований список. Для цього введіть:
<UL>
<LI> Завдання 1
<LI> Завдання 2
<L1> Завдання 3
</UL>
Побудуйте нумерований список. Для цього введіть:
<OL>
<LI> Завдання 1 – проста веб-сторінка
<LI> Завдання 2 – веб-сторінка з елементами форматування
<LI> Завдання 3 – включення таблиці у веб-сторінку
</OL>
6. Відокремите цей абзац смугою жовтого або зеленого кольору.
Вставте з колекції ClipArt малюнок. Розташуйте малюнок з правого боку сторінки.
7. Вставте гіперпосилання на файл з ім'ям zavdanna1.html. Для цього після малюнка вставте рядки:
<р> Активізуйте гіперпосилання
<А HREF= «Zavdanna1.htm»> Zavdanna1 </A>.
8. Збережете цей документ під ім'ям zavdanna2.html і другий раз під ім'ям zavdanna2.txt.
9. Перегляньте відображення файлу zavdanna2.html за допомогою браузера. Встановіть зв'язок між елементами коду HTML і фрагментами документа, що відображається на екрані. Текст Zavdanna1 буде виділений як гіперпосилання. Активізація цього тексту викликає появу файлу Zavdanna1.
Завдання 3. Створення таблиць
1. Відкрийте файл Zavdanna1.txt.
2. Видаліть в файлі весь текст, що знаходиться між тегами <BODY> і </BODY>.
3. Введіть тег <TABLE BORDER= "10" WIDTH= "100%">.
4. Введіть рядок <CAPTION="TOP"> Список телефонів </CAPTION>.
5. Перший рядок таблиці містить заголовки стовпців. Введіть:
<TR BGCOLOR=«YELLOW» ALIGN=«CENTER»> <TH> СЛУЖБА <ТН> Номер телефону.
6. Введіть:
<TR> <TD> Пожежна охорона </TD> <TD> 01 </TD>
<TR ><TD> Міліція </TD> <TD> 02 </TD>
<TR> <TD> Швидка допомога </TD> <TD> 03 </TD>
<TR> <TD> Газова служба </TD> <TD> 04 </TD>
7. Завершіть таблицю тегом </TABLE>.
8. Збережете документ під іменами Zavdanna3.htm та Zavdanna3.txt.
9. Прогляньте отриманий файл за допомогою браузера. Вивчіть, як створена таблиця відображається в програмі Internet Explorer.
Завдання 4. Створення прайс-листа засобами мови HTML
Засобами мови HTML створіть прайс-лист за поданим зразком (рис.1).
Рис.1. – Зразок прайс-листа
Варіант 1 – Материнські плати на чіп сетах Intel
Виробник | Модель | Ціна, грн.
Foxconn | 945P7AA-8KS2 | 500
Gigabyte | GA-8I945p-G | 525
MSI | 945P Neo Platinum | 600
ASUS | P5LD2 Deluxe | 700
Варіант 2 – Струйні принтери
Виробник | Модель | Ціна, грн.
Lexmark | Z735 | 225
HP | DeskLet 3940
Варіант 1 – Материнські плати на чіп сетах Intel |
300
HP | DeskLet 5943 | 550
HP | DeskLet 6623 | 950
Варіант 3 – Струйні принтери
Виробник | Модель | Ціна, грн.
Epson | Stylus C48 | 350
Epson | Stylus C87 | 500
Canon | Pixma iP1600 | 375
Canon | Pixma iP5200 | 900
Варіант 4 – Монітори
Виробник | Модель | Ціна, грн.
Samsung | SyncMaster 795F | 650
Samsung | SyncMaster 757MB | 850
LG | Flatron F720B | 725
LG | Flatron F720P | 800
Варіант 5 – Монітори LCD
Виробник | Модель | Ціна, грн.
Samsung | SyncMaster 960BF | 2000
Samsung | SyncMaster 970P | 2500
LG | Flatron L1980Q | 2200
Acer | AL1951B | 2100
Варіант 6 – Процесори
Найменування | Ціна, грн. | Гарантія, міс
AMD Athlon 64 3000+ | 475 | 24
Celeron D352 | 480 | 36
AMD Athlon 64 3500+ | 525 | 24
Pentium D805 | 625 | 36
Варіант 7 – Жорсткі диски
Найменування | Ціна, грн. | Об’єм, GB
Western Digital WD800JB | 300 | 80
Hitachi HDS722516VLAT80 | 400 | 160
Samsung SP1614N | 410 | 160
Samsung SP2004C SATA NCQ | 450 | 200
Варіант 7 – Відеокарти
Найменування | Ціна, грн. | Чіпсет
ASUS EN7600GT | 1200 | GF 7600GT
MCI NX7300GT | 500 |