- •Основи web-дизайну завдання та методичні вказівки
- •"Економічна інформатика"
- •1 Гігієна і санітарія праці, техніка безпеки роботи на персональному комп’ютері. Організація робочого місця
- •2 Теоретичні основи html
- •2.1 Загальні положення
- •2.2 Створення web – сторінок і робота з ними
- •2.3 Загальна структура документа html
- •2.5 Функціональні елементи тексту
- •2.6 Форматування абзаців
- •2.7 Форматування шрифту
- •2.8 Створення списків
- •2.9 Створення рухомого рядка
- •2.10 Вставка графічних об’єктів
- •2.11 Гіпертекстові посилання
- •2.12 Таблиці
- •2.13 Фрейми
- •3 Завдання для самостійного виконання
- •Рекомендована література
2.11 Гіпертекстові посилання
Мова HTML дозволяє організувати посилання з будь якої частини документу. Для створення посилання використовується парний тег <A> з обов’язковим атрибутом HREF=, наприклад, <a href="інформатика.html">. Посиланням може бути текст, таблиця, рисунок. Елементи тексту, які мають гіпертекстові посилання у вікні браузера виділяються кольором та підкресленням. Завантаження матеріалу, на який указує посилання, здійснюється після клацання мишею по посиланню.
Приклад 6. Створення гіпертекстових посилань. Створити Web-сторінку з текстом про те, які дисципліни вивчають студенти першого курсу спеціальності "Облік і аудит" (наприклад, філософія, економічна інформатика, вища математика, історія економічних вчень). За допомогою гіпертекстового посилання вивести у вікно браузера визначення кожної дисципліни При зберіганні файлів всіх документів задавати імена, що не містять пробілів
Спочатку створити сторінки (підпорядковані), які містять текст з визначенням дисциплін та рядок "Повернення до головної сторінки", який містить гіперпосилання. Зберегти з ім’ям Інформатика.html.
<html>
<head>
<title>Економічна інформатика</title>
</head>
<body>
<p > <font size=+2>Економічною інформатикою називається наука, яка вивчає методи автоматизованої обробки економічної інформації за допомогою засобів обчислювальної та організаційної техніки. </font>
<p> <font=+1><a href="Гіпертекстові_посилання.html"> Повернення до головної сторінки </a>
</font>
</body>
</html>
Аналогічно створити сторінки з визначенням дисциплін Філософія, Вища математика, Історія економічних вчень. Зберігати у файлах, імена яких не містять пробілів, наприклад Вища_математика.html
Потім створити основну (головну) сторінку з переліком навчальних дисциплін. Зберегти з ім’ям Гіпертекстові_посилання.html.
<html>
<head>
<title>Гіпертекстві посилання</title>
<body>
<p > <font size=+2>На першому курсі студенти спеціальності "Облік і аудит" вивчають такі дисципліни:
<p><a href=Філософія.html>філософія </a>,
<p><a href=Вища_математика.html> вища математика</a>,
<p> <a href=Інформатика.html>економічна інформатика </a>,
<p><a href=Історія_вчень.html> історія економічних вчень</a>
</font>
</body>
</head>
</html>
2.12 Таблиці
Таблиці мовою HTML задаються парним тегом <TABLE>. Вона може містити заголовок, який визначається парним тегом <CAPTION> та рядки, які задаються парними тегами <TR>. Кожний рядок таблиці містить клітинки, які можуть відноситися до двох різних типів:
клітинки заголовків стовпців та рядків – задаються парними тегами <TH>
звичайні клітинки – задаються парними тегами <TD>
При відображенні таблиці у вікні браузера відбувається автоматичне її форматування у відповідності з кількістю інформації та заданими атрибутами.
Приклад 7. Створення таблиць на Web-сторінках. Мовою HTML створити таблицю наступного виду:
Таблиця 4 Кількість студентів, які навчаються в Одеському державному аграрному університеті
Факультет |
Кількість студентів денної форми навчання |
Кількість студентів заочної форми навчання |
Агрономічний |
350 |
280 |
Плодоовочівництво та виноградарство |
120 |
115 |
Технологія виробництва та переробки продукції тваринництва |
340 |
230 |
Механізації сільського господарства |
360 |
320 |
Ветеринарної медицини |
750 |
- |
Економічний |
850 |
640 |
Землевпорядкування та кадастр |
130 |
126 |
<html>
<head>
<title>Таблиці </title>
</head>
<body>
<table border="10" bgcolor="pink">
<caption> <font size=+2> <b>Кількість студентів, які навчаються в Одеському державному аграрному університеті </b>
<font size=+1>
<th>Факультет
<th>Кількість студентів денної форми навчання
<th>Кількість студентів заочної форми навчання
<tr>
<td>Агрономічний<td font align="center">350<td font align="center">280
<tr>
<td>Плодоовочівництво та виноградарство<td font align="center">120<td font align="center">115
<tr>
<td>Технологія виробництва та переробки продукції тваринництва<td font align="center">340<td font align="center">230
<tr>
<td>Механізація сільського господарства<td font align="center">360<td font align="center">320
<tr>
<td>Ветеринарна медицина<td font align="center">750<td font align="center">-
<tr>
<td>Економічний<td font align="center">850<td font align="center">640
<tr>
<td>Землевпорядкування та кадастр<td font align="center">130<td font align="center">126
</table>
</body>
</html>
Документ зберегти в особистій папці у файлі з ім’ям Таблиця.html