1. На Робочому столі створіть папку з назвою HTML.
2. Скопіюйте в цю папку всі графічні файли та документ file.doc з папки: public:\П+Інформатика 2курс\Основи Інтернет\Lab4_html\Image.
3. В теці HTML створюємо текстовий документ з назвою lab4.html, відкриваємо його та створюємо заготовку для HTML-коду Web-сторінки:
<html>
<head>
<title>Рисунки</title>
<META http-equiv=Content-Type content="text/html;
charset=windows-1251">
</head>
<body>
</body>
</html>.
4. Оформимо створенуWeb-сторінку наступним чином:
1) Тло сторінки – картинка.
Для цього в тезі <body> пописуємо параметр background з значенням "3.jpg"
<body background = "3.jpg">
"3.jpg" – адреса файлу картинки, яка визначає тлоWeb-сторінки. Адреса файлу записана у такому вигляді, оскільки файл міститься у тому ж каталозі що і основний HTML-файл.
Збережіть зміни і оновіть сторінку у браузері.
2) На сторінці розташуємо три картинки однакового розміру.
У HTML-коді Web-сторінки пропишіть наступний код:
<p> <center>
<img src = "1.jpg" width = 300 height = 300>
<img src = "2.jpg" width = 300 height = 300>
<img src = "4.jpg" width = 300 height = 300>
</center>
<p>
width = 300 height = 300 –ці параметри вказують висоту і ширину картинки.
Відключимо показ рисунків у вікні браузеру та проведемо оновлення нашої сторінки.
6. Визначимо в документі Lab4.html графічне гіперпосилання (рисунок 1.jpg) на документ file.doc. Додамо для цього відповідний HTML-код та переглянемо документ Lab4.html
Результатом реалізації цього гіперпосилання буде інформаційне вікно (рис. 1), в якому можна вибрати команду відкрити текстовий документ, на який здійснено посилання або зберегти його.
Рис. 1
7.Визначимо в документі Lab4.html ще одне графічне гіперпосилання (рисунок 2.jpg) на документ calendar.html. Реалізуємо відкривання файлу, на який здійснюється посилання, у новому вікні та пропишемо пояснення до гіперпосилання. Додамо для цього відповідний HTML-код та переглянемо документ Lab4.html.
Спочатку створимо Web-сторінку з назвою calendar.html
<td colspan = "7" align = "center"><font face = "georgia"><i>Жовтень</i></font></td>
</tr>
<tr>
<td>Пн</td>
<td></td>
<td>3</td>
<td>10</td>
<td>17</td>
<td>24</td>
<td>31</td>
</tr>
<tr>
<td>Вт</td>
<td></td>
<td>4</td>
<td>11</td>
<td>18</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>Ср</td>
<td></td>
<td>5</td>
<td>12</td>
<td>19</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>Чт</td>
<td></td>
<td>6</td>
<td>13</td>
<td>20</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>Пт</td>
<td></td>
<td>7</td>
<td>14</td>
<td>21</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>Сб</td>
<td>1</td>
<td>8</td>
<td>15</td>
<td>22</td>
<td>29</td>
<td></td>
</tr>
<tr>
<td>Нд</td>
<td>2</td>
<td>9</td>
<td>16</td>
<td>23</td>
<td>30</td>
<td></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Можете переглянути файл calendar.html у браузері (рис.2).
Рис. 2
Таку сторінку реалізовано шляхом вкладання однієї таблиці в іншу.
8. Доповнимо сторінку Lab4.html текстом. Перед закриваючим тегом body пропишіть наступний код
<p> <b>Бузок</b>
<p align = "justify"> <img src = "buzok.jpeg" align = "left" hspace = "7"> Існує така легенда про походження бузку. Богиня весни розбудила Сонце і його вірну супутницю Іріс (веселку),
змішала промені сонця із строкатими променями веселки, почала щедро сипати їх на свіжі борозни, на луки, гілки дерев – і усюди з’являлися квіти, а земля тріумфувала від цієї благодаті. Так вони дійшли до Скандинавії, але у веселки залишилася лише лілова фарба. Незабаром тут опинилося стільки бузку, що Сонце вирішило змішати фарби на палітрі Веселки і почало сіяти білі промені – так до лілового бузку приєднався і білий.
<p align = "justify"> Батьківщина бузку – Персія. У Європу вона потрапила лише в XVI столітті. У Англії бузок вважається квіткою нещастя. Старе англійське прислів’я говорить, що той, хто носить бузок, ніколи не носитиме вінчальне кільце. На Сході бузок
служить символом сумного розставання і закохані вручають її один одному при розставанні назавжди.
Збережіть внесені зміни та оновіть сторінку в браузері.
У результаті Ви на сторінці побачите текст, який обтікає картинку. Це реалізували, прописавши у тезі img параметр align = "left",який відповідає за вирівнювання картинки на сторінці по лівому краю та задає обтікання справа. Якщо align = "right",то зображення вирівнюється по правому краю і задає обтікання зліва.
Параметр hspace = "7" тега img задає горизонтальний відступ від картинки до тексту. Він додає порожній простір одночасно ліворуч і праворуч від зображення. Тому малюнок від краю вікна буде на відстані, яка дорівнює значенню, що вказане цим атрибутом.
9. Додамо текстове гіперпосилання.
У коді сторінки Lab4.html пропишіть код
<p> Корисна інформація про квіти міститься на <a href = "http://www.young-teacher.com.ua"> сайті </a> вчителя-початківця.
Таким чином Ви зробите текстове гіперпосилання і при натисненні на слово «сайті» Ви відкриєте сторінку сайту вчителя-початківця.
10. Створимо посилання в межах сторінки.
Створимо посилання на початок сторінки. Для цього розмістимо безпосередньо перед тегом marquee "якір" з ім’ям begin:
<a name = begin></a>
Модифікуємо HTML-код файлу Lab4.html для визначення самого внутрішнього посилання. При цьому в параметрі href вказуємо ім’я "якоря" з префіксом #:
<a href = "#begin">Початок</a>
11.Відмініть рамку у графічних гіперпосиланнях. Обмежте кількість проходів рухомого тексту в смузі до 3 разів. Створіть внутрішнє гіперпосилання на слово Бузок.
12. Створити сайт, що містить три сторінки.
На кожній сторінці забезпечити перехід між сторінками. Одну сторінку оформити у вигляді картинної галереї. Передбачити на сторінках сайту внутрішні посилання, якщо це необхідно. Тему сайту вибирайте відповідно до номера свого варіанту. Варіант запитайте у викладача.
