2.8 Створення списків
Мова HTML підтримує 5 видів списків: упорядковані, неупорядковані, списки визначень, списки меню та списки каталогів (останні 2 вважаються застарілими та не використовуються). Розглянемо спосіб створення упорядкованих (нумерованих) та неупорядкованих (маркованих) списків, які оформлюються однаково. Для упорядкованих списків використовується парний тег <OL>, для неупорядкованих списків - <UL>
Приклад 3. Створення списків (нумерованих та маркованих) На сріблястому фоні створити заголовок першого рівня "ПРИКЛАД СТВОРЕННЯ УПОРЯДКОВАНИХ ТА НЕУПОРЯДКОВАНИХ СПИСКІВ", який розмістити по центру, шрифт Times New Roman зеленого кольору, розміром, збільшеним на 3. В списку упорядкувати (пронумерувати) групи дисциплін (математичні та суспільні), а самі дисципліни (математичний аналіз, лінійна алгебра, аналітична геометрія, філософія, правознавство) в групах помітити маркером. Шрифт нумерованого списку жирний, розмір збільшено на 2, кольору "purple". Шрифт маркованого списку – курсив.
Рис.3 Вікно браузера з завантаженим документом "Нумеровані та марковані списки.html"
Порядок виконання описано в попередніх прикладах. Файл зберегти в особистій папці у файлі з ім’ям Нумеровані та марковані списки.html.
<html>
<head>
<title>Нумеровані та марковані списки</title>
<body>
<body bgcolor="silver">
<font color="green", size=+3, face="times new roman">
<h1><p>ПРИКЛАД СТВОРЕННЯ УПОРЯДКОВАНИХ </p>
<p>ТА НЕУПОРЯДКОВАНИХ СПИСКІВ </p></h1>
<font color="purple", size=+2>
<ol>
<li><b>МАТЕМАТИЧНІ ДИСЦИПЛІНИ</b> </li>
<ul>
<i><li> Математичний аналіз </li>
<li> Лінійна алгебра </li>
<li>Аналітична геометрія </li></i>
</ul>
<li><b> СУСПІЛЬНІ ДИСЦИПЛІНИ</b> </li>
<ul>
<i><li> Філософія </li>
<li> Правознавство </li></i>
</ul>
</ol>
</font>
</body>
</head>
</html>
2.9 Створення рухомого рядка
На Web-сторінці можна створити рядок, задати його колір та текст, який рухається вздовж рядка. Здійснюється це парним тегом <MARQUEE>. Параметром тега являється колір рядка. Тег записується за наступним шаблоном:
<marquee bgcolor="колір"> текст </marquee>
Приклад 4. Створення сторінки з рухомим рядком. На Web-сторінці створити рухомий рядок рожевого кольору з текстом: "Вивчення мови HTML потребує уваги та ретельності". Фон сторінки – сріблястий. Шрифт тексту Times New Roman коричневого кольору, збільшено на 3. Порядок виконання розглянуто в попередніх прикладах. Документ зберегти в особистій папці у файлі з ім’ям Рухомий рядок.html
<html>
<head>
<title>Створення рухомого рядка</title>
</head>
<body>
<body bgcolor="silver">
<font color="brown", size=+3, face="times new roman">
<marquee bgcolor="pink">Вивчення мови HTML потребує уваги та ретельності</marquee>
</font>
</body>
</html>
2.10 Вставка графічних об’єктів
Графічні ілюстрації являються невід’ємною частиною Web-документа. Графічні елементи Web-сторінок застосовують два основних формати – GIF та JPEG. Для підготовки зображень можна використовувати любий графічний редактор (наприклад стандартний додаток Paint операційної системи Windows). Рисунки зберігаються на Web-вузлах в окремих файлах, але відображаються як елементи Web-сторінок.
Для вставки рисунку використовується парний тег <IMG> з обов’язковим атрибутом SRC=, який задає адресу файлу з зображенням.
Атрибути WIDHT= та HEIGHT= задають відповідно ширину та висоту рисунку.
Атрибут ALIGN= задає режим взаємодії рисунку з текстом. Наприклад, якщо задано:
ALIGN="LEFT", то зображення розташовується у лівого краю сторінки, текст розміщується праворуч;
ALIGN="RIGHT", то зображення розміщується у правого краю сторінки, а текст – ліворуч від нього
Рекомендується задавати величину відстані від тексту атрибутами HSPACE= (по горизонталі) та VSPACE= (по вертикалі).
Якщо рисунок за якимись обставинами неможливо продивитись, необхідно задати так званий альтернативний текст, який відображається замість зображення і може ознайомити зі змістом рисунку. Альтернативний текст задається атрибутом ALT=
Зображення можуть використовуватись в якості фонового рисунку, який задається атрибутом BACKGROUND= у тегі <BODY>
Приклад 5. Вставка графічних зображень. На Web-сторінку із "Папки фото БД" додати рисунок розміром 100 пікселів по висоті та ширині, який розмістити ліворуч, задати відстань від тексту по вертикалі та горизонталі 20 пікселів. Задати альтернативний текст, який коротко описує вміст рисунку. Порядок виконання розглянуто в попередніх прикладах. Документ зберегти в особистій папці у файлі з ім’ям Вставка рисунків.html
<html>
<head>
<title>Вставка рисунків</title>
</head>
<body>
<img src="Задати шлях до файлу, його ім’я та розширення", widht="100", height="100", align="left", hspace="20", vspace="20", alt="Текст замість зображення">
<p > <font size=+3><i>Це приклад, який показує можливість вставки графічних об’єктів на Web-сторінку </i>
</font>
</body>
</html>
Результат виконання представлено на рисунку 4.
Рис.4 Вікно браузера з рисунком та текстом.